Yeoman導入記〜自動リロード等にあこがれて〜

先日24日、TwitterのTL上でChrome Tech Talk Night #4が開催されていることを知り、ライブ配信にて聴講しました。（現在は同ページで録画が閲覧可能です。資料へのリンクもあります。）当日はお二方の講演があったのですが、中でもPaul Irish氏の「Webapp Workflow & Yeoman（ウェブアプリケーション開発のワークフローと Yeoman）」で紹介されたオープンソースのフレームワーク/ツール「Yeoman（ヨーメン/ヨーマン）」に大変興味を持ちました。

Yeomanのデモを見ると開発をサポートしてくれる多彩な機能があるようですが、私はファイルを更新するとブラウザに表示している画面が自動リロードされることにまず注目しました（そこか！と思われるかもしれませんが...）。以前在籍した会社で自動リロードする拡張か何かを耳にしたことはあり、そういうことができることは何となく知っていたのですが、今改めて見てみると欲しい機能だなと思った次第です。

そこで、なんとか自分のプロジェクトでYeomanを使うことができないか、いろいろ操作しながら研究してみました。こればかりにあまり時間を掛けられないのできっと正攻法ではないかもしれませんが、Yeomanの良いところを利用した制作が行えるところまでたどり着いたので、覚え書きしておきたいと思います。（Yeomanの真価は発揮できていないかもしれませんが、今後研究・利用するということで...。）

今回実現したこと

オリジナルのプロジェクトファイルのコピーを自動化
自動リロードの実現（LiveReload 2と同等と思われるが、各HTMLにスクリプトを埋め込む必要が無い）
元々利用していたgrunt.jsをYeomanのGrantfile.jsに統合

Codekitでもほぼ同じことができるのかもしれませんが、アプリには興味が無かったのと、Firefox派なので...（Webkit系しか自動リロードできないとか）。

インストール

元々Sass、Compass、Node.js、Homebrewなどはインストール・利用していたので、Yeoman公式サイトにある一行のコマンドを実行するのみでした。

$ curl -L get.yeoman.io | bash

PhantomJS等不足があればインストールコマンドと共に示されるので、それを実行するだけでOKでした。

オリジナルのプロジェクトファイル作成

次のコマンドを実行するとYeomanで定義されたプロジェクトファイル一式が作成されます。

$ yeoman init
# もしくは
$ yeoman init quickstart

ただ、ドキュメントルート直下にstylesやscriptsがあるなど、ごく一般的なディレクトリ構成とは違うかなと思いました（ウェブアプリケーション向けな感じですね）。調べるとyeoman init generator [originalname]（ドキュメントもありました）で何かできそうですがどうも上手くいかない...、と触っているうちに、テンプレートファイルが格納されているパスが判明。私は@hokacchaさんのnodebrewでNode.js環境を整えていることから、次のパスのquickstartをコピーしてwebsiteにリネームしました。

テンプレートファイルが格納されているディレクトリ: /Users/[YourName]/.nodebrew/node/[バージョンNo.]/lib/node_modules/yeoman/node_modules/yeoman-generators/lib/generators

次のコマンドを実行すると、見事リネームして置いたwebsiteの内容がコピーされました。プロジェクトファイルをGitで管理すれば、常にベストな状態のファイルがコピーされると思うので、これも効率化の一助になりそうです（今までは手動でやっていました）。

$ yeoman init website

問題なく自分向けのプロジェクトファイルでイニシャライズされることが分かったので、次のようにディレクトリを整えました。Yeomanの機能を使ったjQueryなどのライブラリ管理ができなくなるかもしれませんが、当面は使わないので気にしないことに。また使うことになったら考えます。

templates
 ├ htdocs // Apacheがhtdocsを読む設定なので互換の意味も込めて
 │ ├ _scss // Scssのテンプレート・mixin・カスタムSass関数/モジュール等
 │ ├ common // CSS・JS・画像ファイルをサブディレクトリに格納
 │ ├ favicon.ico // 無いと後でエラーが出る
 │ ├ index.html
 │ └ robots.txt 
 ├ materials // PSD等の素材を入れるところ
 ├ test // quickstartに含まれていたので、とりあえずそのままに
 ├ config_dev.rb // Compassの設定ファイル
 ├ config.rb
 ├ Gruntfile.js
 ├ init.bash // app->htdocsのシンボリックリンクを作成するだけ。yeoman serverの関係で。
 └ package.js

Gruntfileのカスタマイズ

主にパスの修正です。htdocssではなくappのままで。

 // default watch configuration
 watch: {
 coffee: {
 files: 'app/scripts/**/*.coffee', // CoffeeScript本格導入時に考える
 tasks: 'coffee reload'
 },
 compass: {
 files: [
 'app/_scss/**/*.{scss,sass}'
 ],
 tasks: 'compass reload'
 },
 reload: {
 files: [
 'app/**/*.html',
 'app/**/*.css',
 'app/**/*.js',
 'app/**/images/*'
 ],
 tasks: 'reload'
 }
 },

Compassはconfig_dev.rbに基づいてコンパイルするように設定。カスタムSass関数を参照したり、Firesassでscssファイルの場所をチェックできるようにしたいので、開発用の設定ファイルを参照しています。

 // compile .scss/.sass to .css using Compass
 compass: {
 dist: {
 // http://compass-style.org/help/tutorials/configuration-reference/#configuration-properties
 options: {
 config: 'config_dev.rb'
 }
 }
 },

画像の最適化は次のようにサブタスクで適宜実行できます。

$ yeoman img

そこで、次のように設定しました。元々grunt.jsに書いて実行していた内容の反映です。

 // Optimizes JPGs and PNGs (with jpegtran & optipng)
 img: {
 dist: {
 src: ["htdocs/**/images/*.png", "htdocs/**/images/*.jpg"]
 }
 },

その他JavaScript関係のタスクがありますが、適宜調整しながら使います。やりたいことはたくさんです...。（2012年10月28日追記：BowerとJSHintの設定はしました。）

yeoman serverについて

下記コマンドを実行すると、localhost:3501でサーバーが起動し、ファイルの更新に合わせて画面が自動リロードします。

$ yeoman server

今まで自動リロードは要らないと思ったけど、やはりこれは便利。192.168.1.10:3501等自分のIPにすれば、他のマシンやバーチャルマシンからでも参照できるようです。