Yeoman+AngularJSでモダンなフロントエンド開発

Yeomanとは

LESS、Sass、compass、CoffeeScript、TypeScript等々、フロントエンドのWebアプリケーション技術は多様化しており、標準化された開発手法はなく今までは各々がツールを用いていた。
Yoemanはフロントエンド開発に有効なツールを組み合わせてモダンな開発フローを提供するツールセットである。
ようは今まで手動でやっていたGruntの設定などを自動で生成してくれる。

Yeomanを構成するツール

• yo
  • アプリケーションの雛形を作成してくれる
  • BowerやGruntの設定
• Grunt
  • ビルド & テスト
• Bower
  • 必要なフロントエンドのライブラリの管理

インストール

Nodeのインストール

ここを見てNodeのインストールを行う。
一応Nodeのバージョンはv0.11.13で動作確認。
環境はOS X 10.9.2

nvm install v0.11.13

Compassのインストール

sudo gem install compass

yo Grunt Bowerのインストール

npm install -g  bower grunt-cli yo

generator-angularのインストール

npm install -g generator-angular
mkdir sample-app && cd $_
yo angular [app-name]
# yo angular [app-name] --coffee Coffeeで開発したい場合こっち

後は下の画像のようにすべて回答はYesで

ビルド & テスト

ビルド

以下のコマンドを入力すると自動でブラウザが立ち上がり、下のページが表示される

grunt serve

すでに以下の環境が整っているためすぐに開発することができる。

• LiveReload
• Sass(、Coffee)自動ビルド
• 自動テスト

エラー修正

しかし自分の環境では以下のエラーが発生

Loading "cdnify.js" tasks...ERROR
>> Error: Unable to create git_template directory: Arguments to path.resolve must be strings

Running "serve" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "bowerInstall:app" (bowerInstall) task

Running "bowerInstall:sass" (bowerInstall) task

Running "concurrent:server" (concurrent) task
    
    Loading "cdnify.js" tasks...ERROR
    >> Error: Unable to create git_template directory: Arguments to path.resolve must be strings
    
    Running "compass:server" (compass) task
    directory .tmp/styles/ 
       create .tmp/styles/main.css (2.012s)
    Compilation took 2.027s
    
    Done, without errors.
    
...以下略

どうやらgrunt-google-cdnというのがエラーを吐いているみたい。
あとgrunt testを実行した時もエラーを吐いていた。
エラーを解消するには以下のようにpackage.jsonを編集

diff --git a/package.json b/package.json
index 6c2d0b5..cd95d39 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "grunt-contrib-jshint": "~0.7.1",
     "grunt-contrib-uglify": "~0.2.0",
     "grunt-contrib-watch": "~0.5.2",
-    "grunt-google-cdn": "~0.2.0",
+    "grunt-google-cdn": "~0.4.0",
     "grunt-karma": "^0.8.3",
     "grunt-newer": "~0.6.1",
     "grunt-ngmin": "~0.0.2",
@@ -27,6 +27,7 @@
     "grunt-usemin": "~2.0.0",
     "jshint-stylish": "~0.1.3",
     "karma": "^0.12.16",
+    "karma-jasmine": "~0.2.0",
     "karma-ng-html2js-preprocessor": "^0.1.0",
     "karma-ng-scenario": "^0.1.0",
     "load-grunt-tasks": "~0.4.0",

そのあとは変更したnpmモジュールを以下のコマンドでインストール

npm install

リリースモードでビルド

grunt serve:dist

テストのみ

grunt test