Yeomanというのは、
・scaffoldingツールのyo
・buildツールのGrunt
・package managerのBower
を組み合わせて、プロジェクトのひな形を自動生成してくれるツール。
つまり、今までに習得した、Grunt、Bower の思想や知識があれば、
yoが書き出すひな形を理解することが出来るし、
GruntとBowerの設定ファイルを読み書き出来れば、
RequireJS を導入したり、Ionic を導入することも出来る。
長いので、結論は一番下にあります。
まずは、yoが書き出す基本的なプロジェクト構造を理解するために、、
・YeomanでAngularJSのテンプレ作成
yo angular --minsafe MyApp
※ –minsafeはminify時のエラーを出なくするためのオプション
Gruntfile.js を見ているといくつか見たことのない記述と出会ったのでメモ。
・<%= yeoman.app %>
<%= %> はGruntfile.js内で他のtaskで定義された値を変数として扱う時に使う
・test/spec/{,*/}*.js
通常は、test/spec/**/*.js と書いて無限に階層を掘るんだけれど、
1階層に限定したい時に使う
続いて初めて見るGruntのtaskを理解する。
・grunt-concurrent
https://github.com/sindresorhus/grunt-concurrent
タスクを並列処理する。
・grunt-wiredep
https://github.com/stephenplusplus/grunt-wiredep
bowerで管理しているJS, CSSファイルへの参照を、htmlファイル内の、
<!– bower:css –>
<!– endbower –>
<!– bower:js –>
<!– endbower –>
の間や、scssファイル内の
// bower:scss
// endbower
の間に挿入する。トリガーのタイミングは、 bower.json を watch している。
・grunt-usemin
https://github.com/yeoman/grunt-usemin
<!– build:css(.) styles/vendor.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>
<!– build:css(.tmp) styles/main.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>
<!– build:js(.) scripts/vendor.js –>
<script src=”~~~~.js”></script>
<script src=”~~~~.js”></script>
<!– endbuild –>
それぞれに挟まれた、CSSやJSファイルを1ファイルに結合して、
HTMLも書き換える。すごい。リリース用のビルド時に行う。
CSSが.tmp内に入っていたりするのは、Yeomanの設計思想だと思う。
また、.tmpに入ったものをそのままブラウザに読み込ませるために、
connect の livereload オプションで色々やっている。(次に説明)
・grunt-contrib-connect の connect.static module
http://www.senchalabs.org/connect/static.html
connect.static(‘.tmp’) と書くと、
.tmp/styles の中身を /style にあるように振る舞わせたりできる。
・grunt-filerev
https://github.com/yeoman/grunt-filerev
ファイル名にリビジョン番号を追加
・grunt-cdnify
https://github.com/callumlocke/grunt-cdnify
ファイルの参照にCDNのURLを書き換えてくれる。
サンプルプロジェクトで必要とされているか不明。
・grunt-ng-annotate
https://github.com/mzgol/grunt-ng-annotate
AngularJS関連。まだありがたみがわからない。
このあと、
yo angular --minsafe --coffee MyApp
して、CoffeeScriptバージョンのプロジェクトと見比べてみると、
coffeeファイルもコンパイル後に、.tmp に書き出していて、
リリースビルド時に、concatしているみたい。
結論:
・grunt-wiredep で、Bower のコンポーネントを自動的にHTML内に引っ張ってきている。
・grunt-usemin によって、リリースビルド時に CSS, JS を concat して、
HTMLからの参照も書き直すということをやっている。
・connect.static module で、connect のサーバーの base の外のディレクトリも参照できる。
それによって、Compass、Coffeeともに、コンパイル後の css, js ファイルを、
不可視ディレクトリ (.tmp) に書き出したり、
bower_components を、appディレクトリの外に置いたりしても大丈夫。
・人間がエディタで編集すべきファイルのみを、appディレクトリに集めている。
・今後、Ionic や RequireJS と共存する場合は、適宜 task を切り捨てても良いと思う。
