[Grunt & Yeoman] Yeoman: フロントエンド開発のワークフローを提供するツール

Node.js も Grunt もさっぱりだったので、分からないことが多すぎて保留していたときのメモ。

時系列的には Grunt よりも先にさわっていたんですが、プロジェクトが現在進行形のようでいろいろ変わっているよう。
いまだに保留中。

Yeoman

なぜ Yeoman か。

gruntはJavascript/Web開発に関しては非常に万能で強力なんだけど、設定ファイルは書くのが結構大変で、プロジェクトのディレクトリ構成などによってはどうしても他の人が書いたものそのままでは困ることがある。 そこである程度、標準的なディレクトリ構成などの作法を提供しようというのがyeomanの方向性だと思われる。

開発環境をまるっと提供してくれる。

プロジェクトに応じた generator がたくさんある。

他の技術との関係は?

LESS、Sass、compass、Coffeescript、TypeScript等々、クライアントサイドのWebアプリケーション技術は多様化しています。
Coffee ScriptやLESS等の拡張言語はコンパイルする必要がありますし、jsファイルはconcat/最適化/ミニファイすることも多いです。

Yeomanは開発者がアプリケーション開発に注力できるよう、アプリのひな形生成からテストやコンパイル、ファイル最適化といったワークフローを提供してくれます。

インストール

入ってなければ。

% sudo gem install compass

インストール。

% npm install -g  bower grunt-cli yo

バージョン。

% yo -v
1.0.5
% bower -v
1.2.8
% grunt -V
grunt-cli v0.1.11
grunt v0.4.2

プロジェクトを始める

テンプレートをインストールする

ディレクトリを作成して、雛形 webapp をつかったプロジェクトを開始します。

% mkdir test_yeoman
% cd test_yeoman
% npm install -g generator-webapp
npm http GET https://registry.npmjs.org/generator-webapp
    :
generator-webapp@0.4.7 /Users/****/.nodebrew/current/lib/node_modules/generator-webapp
├── chalk@0.4.0 (has-color@0.1.3, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── cheerio@0.13.1 (underscore@1.5.2, entities@0.3.0, CSSselect@0.4.0, htmlparser2@3.4.0)
└── yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.6, text-table@0.2.0, mime@1.2.11, async@0.2.10, mkdirp@0.3.5, isbinaryfile@2.0.1, shelljs@0.2.6, glob@3.2.8, underscore.string@2.3.3, findup-sync@0.1.2, iconv-lite@0.2.11, lodash@2.4.1, file-utils@0.1.5, inquirer@0.4.0, request@2.30.0, download@0.1.10)

有名なヨーおじさんが現れるので、質問に回答する。
Sass with Compass, Bootstrap, Modernizr を使います。

% yo webapp
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
[?] What more would you like? (Press <space> to select)
❯⬢ Sass with Compass
 ⬢ Bootstrap
 ⬢ Modernizr

リターンをすると、以下のように Scaffold が始まります。

[?] What more would you like? Sass with Compass, Bootstrap, Modernizr
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create app/favicon.ico
   create app/404.html
   create app/robots.txt
   create app/.htaccess
   create app/styles/main.scss
   create app/index.html
   create app/scripts/main.js
I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.
npm WARN package.json test-yeoman@0.0.0 No description
    :

サーバを起動し、開発を始める

grunt serve にタスク名が変わった旨が Gruntfile.js に書かれているので、これで起動します。

% grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "concurrent:server" (concurrent) task
    Running "copy:styles" (copy) task
    Done, without errors.
    Execution Time (2014-02-04 13:40:22 UTC)
    loading tasks   6ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 35%
    copy:styles    10ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 59%
    Total 17ms
    Running "compass:server" (compass) task
    directory .tmp/styles/
       create .tmp/styles/main.css (3.386s)
    Compilation took 3.387s
    Done, without errors.
    Execution Time (2014-02-04 13:40:22 UTC)
    compass:server  5.2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
    Total 5.2s
Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:9000.
Running "watch" task
Waiting...

2014-02-05_yeoman_01

これで始められるよう。
その他に grunt build, grunt test などが設定されていますね。

generator とは

このテンプレートは、generator と呼ばれています。
2014/02/04 現在で、484 の generator が公開されています。

また、generator を独自に作ることも可能。

補遺

Sublime Text のパッケージと port がぶつかった

以前試したときには、こんな対策をしました。

Running "watch" task
Waiting...Fatal error: Port 35729 is already in use by another process.

Sublime Text のパッケージが使うポートとかぶっているらしい。

ポートを変更します。

        connect: {
            options: {
                port: 9000,
                livereload: 35728,
                // change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },