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も作成される