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

概要

bootstrapの使い方をまとめています。

まとめ

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

まだの場合は「Yeomanインストール（其の３） 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.jsをインストール
4. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ
5. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ