〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ

Node.js と grunt-cli はインストールされている状態とします。

まだの場合は「Yeomanインストール(其の3) YO BOWER GROUNT をインストール - 女心と秋の空。気の向くままに。。」あたりを参考に。

 

  1. githubのページ「twbs/bootstrap · GitHub」からbootstrapをダウンロードします。
    (もちろんgitコマンドでcloneしてもイイですよ^^)
    bootstrap-masterフォルダの中にファイルがいっぱい。
  2. 作業フォルダを作成してbootstrap-masterフォルダの中身をコピー。
    ターミナルで「cd」コマンドを使い、作業フォルダまで移動します。
  3. $ sudo npm install をコマンド。
    たくさんのファイルが node_modulesフォルダにインストールされます。
  4. Grunt実行のコマンド入力します。
    $ grunt watch
    を入力するだけで、Gruntの監視がはじまります。
  5. lessファイルを編集。
    less/variables.less が変数などの設定ファイルになります。
    あとはパーツごとに別れているファイルを編集してデザイン変更。
  6. リアルタイムでdistフォルダ内のcssファイルが更新されていきます。
  7. 作業終了時はターミナルで「ctrl+c」を押下。
    Gruntの監視を終了します。

 

 〜関連ページ〜

  1. Bootstrapでスマフォサイト制作 - 女心と秋の空。気の向くままに。。
  2. GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  3. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  4. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。