#bootstrapをgruntで動かす
これから準備する環境
- node.js
- npm
- Grunt
##開発環境の準備
node.js / npm インストール
grunt-cli インストール
- コマンド
npm install -g grunt-cli
- やり方 http://kojika17.com/2013/03/grunt.js-memo.html
##bootstrap 各プロジェクトの開発環境
bootstrapの準備
- 公式サイトを開く http://getbootstrap.com/getting-started/
- 真ん中にある"Source code"をダウンロードする
- (既存のプロジェクトを編集する場合はそちらをダウンロードする)
- 任意の階層に保存する
- ターミナルから保存したディレクトリ(Grunt.jsが保存されている階層)に移動する
- コマンド
npm install grunt --save-dev
と打ちフォルダにGruntをインストールする - Gruntのインストールが完了したらコマンド
npm install
と打ち込みbootstrapのnode modulesをダウンロードする - ダウンロードが完了しターミナルで
grunt
と打ち込めばコンパイルが開始する
##lessファイルの編集とコンパイル
- ターミナルから保存したディレクトリ(Grunt.jsが保存されている階層)に移動する
-
grunt watch
と打ちwaiting...
の表示が出る(この状態でlessファイルを変更し保存すると自動的にコンパイルされます。) - theme.lessを開きスタイルの追加と変更を行ったら保存→自動でコンパイルされる
- バッチ ジョブ終了は Ctrl+C
-
grunt
と打てばMinifyされたCSSも作成される
##Reference
###Grunt関連
###Bootstrapのコンパイル準備