Yeomanを使ってフロントエンド開発のめんどくさいところを自動化してみたい

IT

HTML5など勉強会で知ったYeomanを使ってみようと思いました。

まずはYeoman（ヨーマン）とは何か。
簡単に言うと、色々めんどくさいことを適当にこなしてくれる便利なおっさんです。
Webアプリ開発を行うにあたって、まぁまぁめんどくちゃいこと、色々ありますよね。
やれJSライブラリをなんちゃらやらCSSをなんちゃらやら、テンプレート的に毎回おんなじこと書いてるのなんとかしたいとか、そういうのを適当にこなしてくれるそうです。

早速使ってみようと思います。
公式サイトはこちら

上記サイトにも書いてありますが、手順は以下の通り

まずMacを用意します
node.jsと、ruby、あとcompassをインストールしときます
次に、以下のコマンドをうちます

$ sudo npm install -g yo grunt-cli bower

とりあえずWebアプリケーションを組みたいので

$ yo webapp


おっさんが語りかけてくるので、返事を適当に返すと以下のコマンドを実行するように言われるので実行します。

$ npm install && bower install

プロジェクトの作成がはじまります。
200MBくらいのファイルを落としてくるため、結構時間がかかります。
紅茶でもいれながら待ちましょう。

ところでシムシティ、最近はまってます。
Macを用意したついでに購入しておくといいと思います。
アジアサーバのジャスパーっていう地域、土地あいてますよーー
公害だらけなので誰かたすけてください

終わりましたね。
ここでいったんビルドしてみましょう。

$ grunt

成功すると、ディレクトリにdistというフォルダができ、そこにファイルが出力されます。

こんな感じのファイルがビルドされて出てきました。
ログを見てるとなんとなく分かりますが、JSのテストとかしてくれたり、Coffeeのコンパイルとか画像の最適化とかcssとかjsの圧縮とかもやってくれて、めんどくさい繰り返し処理をすべて自動化してくれるのがわかりますね。

ところでちょっとものたりないので。。。

$ bower install underscore

でunderscoreをいれてみます。
で、ビルドしてみると

反映されました！

もうご想像の通り

$ bower install jquery

とかすると、最新版のjqueryをgithubから検索して入れてくれたりします。
なんだか胸がキュンキュンしてきますね！

Yeoman、ローカルサーバ立ち上げてリアルタイム編集監視とかもしてくれるらしいんだけど、どうも僕の環境だとうまいこと動いてくれなくてちょっと？？状態です。
もうちょっと触ってみて、面白そうな事が分かればまた書きたいと思います！