yeomanとAngularJSを連携してみる

最近のフロントエンド開発は色々と便利な環境になってきているなと思い自分もその辺りキャッチアップしてみて、それをRails開発に適用する場合どうなるのかを検証するために、調べてみた。

で今回いじるのはYeomanです。

これはBowerやgruntjsと連携した環境を用意してくれて、且つAngularJSで作る場合の雛形を自動生成してくれたりします。
早速いじってみようと思い、こちらのスライドを参考にさせていただきながらやってみました。


$ npm install -g yo grunt-cli bower
$ npm install -g generator-angular

もしgruntjsのインストールに失敗した場合は、こちらを参考にしつつ以下のようにsudo付けてやってみるといいと思います。自分は失敗したので、sudo付けてやったらちゃんと入りました。


$ sudo npm install -g grunt-cli
$ grunt -v

全て入ったら、適当なディレクトリ作って以下のようにyoコマンドを入力してプロジェクトを作ります。


$ mkdir yo-sample
$ yo angular

生成し終わったらgruntを起動します。


$ grunt server

ではhttp://127.0.0.1:9000/#/にアクセスしてみる。
既にgruntによる監視もスタートしているので、ファイル編集したりするとそれに伴って動作します。

では、これをRailsでも使ってみようかと