〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ
Node.js と grunt-cli はインストールされている状態とします。
まだの場合は「Yeomanインストール(其の3) YO BOWER GROUNT をインストール - 女心と秋の空。気の向くままに。。」あたりを参考に。
- githubのページ「twbs/bootstrap · GitHub」からbootstrapをダウンロードします。
(もちろんgitコマンドでcloneしてもイイですよ^^)
bootstrap-masterフォルダの中にファイルがいっぱい。 - 作業フォルダを作成してbootstrap-masterフォルダの中身をコピー。
ターミナルで「cd」コマンドを使い、作業フォルダまで移動します。 $ sudo npm install
をコマンド。
たくさんのファイルが node_modulesフォルダにインストールされます。- Grunt実行のコマンド入力します。
$ grunt watch
を入力するだけで、Gruntの監視がはじまります。 - lessファイルを編集。
less/variables.less が変数などの設定ファイルになります。
あとはパーツごとに別れているファイルを編集してデザイン変更。 - リアルタイムでdistフォルダ内のcssファイルが更新されていきます。
- 作業終了時はターミナルで「ctrl+c」を押下。
Gruntの監視を終了します。
〜関連ページ〜