Yeomanというのは、

・scaffoldingツールのyo
・buildツールのGrunt
・package managerのBower

を組み合わせて、プロジェクトのひな形を自動生成してくれるツール。

つまり、今までに習得した、GruntBower の思想や知識があれば、
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 を切り捨てても良いと思う。