※node.js、npmがインストール済みのMacを用意してください。
入っていなければインストールを行ってください。
1.npmインストール確認
npm -v
npmがインストールされていれば、npmのバージョンが表示される
もし、npmがインストールされていなければhttp://nodejs.org/からインストール。
2.LiveReloadインストール
以下のサイトからLiveReloadをChromeにインストールする。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
3.compassのインストール
sudo gem install compass
4.yo、grunt-cli、bowerのインストール
sudo npm install -g yo grunt-cli bower
5.generator-webappのインストール
sudo npm install -g generator-webapp
6.作業用ディレクトリに移動
cd ディレクトリ名
7.webappプロジェクトを作る
yo webapp
8.ローカルで実行
grunt serve
ファイルが変更されると、自動でブラウザがリロードされる。
※grunt serveはCtr + cで停止。
開発終了時にはビルドする。
grunt build
上記コマンドを実行すると、distディレクトリが作成され、コンパイル/minify済みファイルが出力される。
参照
Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜
http://nantokaworks.com/p879/
フロントエンドのツール Yeoman を勘違いしていた
http://www.slideshare.net/girigiribauer/20130629-yeoman
Yeomanのあれこれ - Qiita
http://qiita.com/sys1yagi/items/4d8c2994580c274fd3fa
Bower入門(基礎編)
Yeoman: フロントエンド開発のワークフローを提供するツール | deadwood
http://www.d-wood.com/blog/2014/02/12_5469.html