最近は、Sass（サース）やCoffeeScript（コーヒースクリプト）など、便利なツールがあります。
そういうツールを使わなかったとしても、jQueryや、Bootstrapなどを触ったことがないWeb制作者はいないのではないでしょうか。

それらを、すぐに使える状態で、用意できるのがYeomanです。

http://yeoman.io/

Yeomanは、3つのツールの複合

Yeomanは、おもに以下の3つのツールが複合されています。

  • Yo
  • Bower
  • Grunt

Yo

プロジェクトのひな形を作成したり、使用するツールです。
そのひな形をgeneratorと呼び、自分で作ることができますし、人が作成したものを使うこともできます。

http://yeoman.io/

Bower

Web用のパッケージマネージャです。
例えば、あるプラグインとそれが動くjQueryのバージョンを、使える状態で揃えてくれます。
Node.jsにおけるnpmやRubyにおけるRubyGems/Bundlerのようなものです。

http://bower.io/

Grunt

タスクランナーとかビルドツールとか呼ばれています。
ファイルを監視し、JavaScriptを圧縮したり、CSSスプライトを作成したり、と色々できます。

http://gruntjs.com/

Yeomanを入れてみる

毎度、懲りずにWindowsで動かしてみます。
（やっては見たものの、Macの方が絶対に幸せになれると確信しました）

Node.jsを入れます

Yeomanは、Node.jsで動くので、入れます。

http://nodejs.org/

git for windowsを入れます

Bowerを入れるためには、まずGitを入れないと駄目なようで、git for windowsを公式サイトからダウンロードして、インストールします。

http://msysgit.github.io/

Adjusting your PATH environmentでは、DOSコマンドプロンプトで使用したいので、二番目を選びます。

yeoman-webapp-start_img01

Yo、Bower、Gruntを入れます

DOSコマンドプロンプトからnpmでインストールします。
Macではターミナルですが、それ以外はWindowsも変わりません。

> npm install yo bower grunt-cli -g

Yeomanを使ってみる

generatorを使ってみよう

初めてなので、Yeomanのサイトにあるgeneratorを使ってみたいと思います。
公式サイトからgenerator-webappを選んでみました。

http://yeoman.io/generators/

https://github.com/yeoman/generator-webapp

公式サイトに書かれている通り、generatorをインストールします。

> npm install -g generator-webapp

作業用のフォルダを作成し、Yoを実行します。

> mkdir yeomantest
> cd yeomantest
> yo webapp

そうするとヨーマンさん（?）が出てきます。

yeoman-webapp-start_img02

カーソルキーとスペースキーで、使用する機能を選択できます。
今回は全て選びます。

それでは次へ、と思ったら何やらエラーが出てしまいました。
もう一度、yo webappを叩いたらいきました。
（知っている方、教えてください）

テストのサーバーを起動してみます。

> grunt serve

また、何やらimageminがエラーが表示されるので、以下のやり方で解決します。

http://qiita.com/Syn/items/140e6c3431e9cc8b06d1

こんな感じの表示が出ましたか？

yeoman-webapp-start_img03

試しにいじってみる

試しにappフォルダの\app\styles\main.scssに変更を加えて保存するとすぐにブラウザで反映されます。
また、下記のようにするとアップ用のデータができます。

> grunt build

ソースを見ると圧縮されているのが分かりますね。

こうすると、テストサーバーで本番用のデータが確認できますね。

> grunt serve:dist

OptionをつけるとCoffeeScriptがサポートされます。

> yo webapp --coffee

まとめ

もっと、Gruntを知らないと、上手く使えない気がしました。
それでも、今まで面倒に感じていた各種ツールを、動作させるまでの手順が、非常に簡単です。

既存のジェネレータを使い込むか、Yeomanのひな形を自作するか、ベストの方法はそれぞれだと思いますが、とにかくツールとしては、非常に魅力的です。

なんか面倒な感じだったから触らずにいましたが、もっと研究しようと思います。

是非、皆さんも試してみてください。

それじゃーねー。