[CI][DevOps] Yeomanでフロントエンド自動リロード
YeomanはGruntとBowerを内包するツールで、Yeoman自体はアプリケーションのひな形を作成するscaffoldingを提供するツールであり、Gruntは[salesforce][DevOps][CI] Grunt（grunt-force）を使ってforce.comへデプロイでご説明した通りビルドツール、BowerはJavascriptライブラリを管理するツールです。
それぞれ独立して開発されていてYeomanからGruntもBowerも扱えるようなイメージです。
まず、Yeomanが必要とするCompassをgemでインストールします。
[html]
$ gem install compass
[/html]
次にYeomanをnpmでインストールします。
[html]
$ npm install -g bower grunt-cli yo
[/html]
続いて適当なディレクトリを作成しアプリケーションのひな形を作成します。BootstrapやRequireJSの利用など選択肢が表示されますので必要なものにチェックをつけてenterします。
[html]
$ mkdir sample
$ cd sample
$ yo webapp
_—–_
| |
|–(o)–| .————————–.
`———´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ ‘__________________________’
| ~ |
__’.___.’__
´ ` |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] What more would you like? (Press <space> to select)
❯⬢ Twitter Bootstrap for Sass
⬢ RequireJS
⬢ Autoprefixer for your CSS
create Gruntfile.js
create package.json
…
[/html]
少し時間がかかりますが、これだけで開発に必要な構成を構築できます。ちなみにyo webappのwebappはひな形の種類を指していて以下のコマンドで他に公開されているひな形を探すことが可能です。
[html]
$ npm search yeoman-generator
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1376045663696
npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1376045663696
NAME DESCRIPTION AUTHOR DATE VERSION
calaxa calaxa ====== =apathetic 2013-05-14 09:11 0.0.1
ft-wp Front-Trends WordPress generator =hubertburdach 2013-03-30 21:08 0.0.1
generator-angular Yeoman generator for AngularJS =sindresorhus =addyosmani =paulirish =btford =pa
generator-angular-component A generator for Yeoman =mgcrea 2013-07-11 17:08 0.2.1
…
[/html]
希望のひな形をインストールする際は以下のようにnpmでインストールします。
[html]
$ npm install -g generator-webapp
[/html]
環境によっては上記のようにスムーズに行かない場合があります。yo webappとしても「webappなんてひな形はない」と怒られて、webappのひな形をインストールしようとしてもエラーになる。そればかりか他のひな形もインストールできない。そういう状況は、ひとまずnodeとnpmのバージョンを上げて解決できました。以下のバージョンであれば、とりあえずうまく行ってます。
[html]
$ node -v
v0.10.15
$ npm -v
1.3.7
[/html]
少し脱線しましたが、最後にHow do I install and use the browser extensions?にLiveReload用の拡張機能がありますので希望のブラウザのものを選択します。拡張機能をインストール後にアプリケーションディレクトリでgrunt serverとすると、Gruntfile内のserver起動タスクが実行されブラウザにアプリケーションが実行/表示されます。
[html]
$ grunt server
Running "server" task
Running "clean:server" (clean) task
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Done, without errors.
Running "coffee:dist" (coffee) task
File .tmp/scripts/hello.js created.
Done, without errors.
Running "compass:dist" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css
Running "compass:server" (compass) task
unchanged app/styles/main.scss
Done, without errors.
Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.
Running "open:server" (open) task
Running "watch" task
Waiting…
[/html]
これで何かファイルを編集して保存するだけでブラウザの更新を行うこともなく変更が反映されるようになります。
こんな感じ（と言っても画像じゃわかりませんが…）
このようにファイル編集によって自動リロードされますので、GruntファイルにJSやCSSのビルドをきちんと記述していれば、Javascriptの構文チェックやCoffeescriptやTypescriptからのJavascriptファイル生成、JSファイルの結合/圧縮、less/scss (sass) + compassでCSSを生成など面倒なことは全てYeomanにお任せです。
ちなみに自分用のアプリケーションのひな形を登録したり公開することも可能ですのでforce.com開発用のひな形などにも挑戦してみると良いかもしれません。