Yeomanを使ってWebアプリ開発の雛形を簡単作成


Yeoman

http://yeoman.io/

まず使うにはnode.jsがインストールされているのが前提。

Yeoman本体をインストール

npm install -g yo

一番標準のwebapp generatorをグローバルにインストール

npm install -g generator-webapp

任意のディレクトリ(例えば/Users/tejitak/workspace/Test)を作りその下で以下のコマンド

yo webapp

するとGruntのファイルや/appなどweb applicationの雛形ができあがる。

試しにサーバーを起動してみると既にlocalhost:9000にアクセスして正しくindex.htmlがデプロイされていることを確認できる。

スクリーンショット 2014-04-26 10.14.18

自分はrequiresなどを使ってAMDでアプリを構築する場合が多かったので、試しにAMD用のwebapp generatorを使ってみる。

https://github.com/popox/generator-webapp-rjs

まずはgeneratorのinstall

npm install -g generator-webapp-rjs

アプリのディレクトリを作成し

yo webapp-rjs

bowerでjqueryのバージョンをあげる

bower install ―save jquery

grunt bower-install

実際にサーバーを動かす

grunt serve

以下のようなwarningが出た。

    Warning: Running “compass:server” (compass) task

    Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use –force to continue.

Rubyはインストールされているので、Compassをinstallしないといけないようだ。

sudo gem install compass

再度grunt serveを実行すると無事localhost:9000がオープン!

ファイル構成は以下のような感じ。

スクリーンショット 2014-04-26 10.34.02

gruntやbowerの知識がまだなく使いこなせていないけど、これだけでも開発のスピードアップが期待できそうな予感。