[Grunt & Yeoman] Yeoman: フロントエンド開発のワークフローを提供するツール
Node.js も Grunt もさっぱりだったので、分からないことが多すぎて保留していたときのメモ。
時系列的には Grunt よりも先にさわっていたんですが、プロジェクトが現在進行形のようでいろいろ変わっているよう。
いまだに保留中。
Contents
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...
これで始められるよう。
その他に 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'
},