node.jsの削除と再インストール

Ubuntuのapt経由で入れていたnode.jsが古くなっていたので
sudo aptitude purge nodejs nodejs-dev npm
で消して

nave経由でインストールする

cd repos
git clone https://github.com/isaacs/nave.git
cd nave
./nave.sh install 0.8.22
./nave.sh use 0.8.22
node -v

開発支援系パッケージのインストール

ついでにyeoman, grunt.js, bowerなどの開発支援系パッケージも入れてみる
npm install -g yo grunt-cli bower

http://yeoman.io/
http://gruntjs.com/
http://twitter.github.com/bower/

scssをコンパイルするにはrubyとcompass gemが必要
sudo gem install compass

yeomanをつかうテスト

mkdir yo-webapp
cd yo-webapp
yo webapp

npm install && bower install

grunt
grunt server

http://localhost:9000/
を開くと生成されたscaffoldが表示できた。

yo webappっていうのはデフォルトでwebappのscaffoldがインストールされているから使える
angular.jsなどを使いたいと思ったら

npm install generator-angular
mkdir yo-angular
cd yo-angular
yo angular
npm install && bower install
grunt
grunt server

yeoman 0.9まではbackboneにも対応していたようだが、1.0になってから動かなくなっている。。

yeomanでできること

基本的にWebアプリのscaffoldジェネレーター。
yeoman0.9とyo1.0以降で作法がだいぶ変わっている。

npm, bower, gruntのラッパーのような動きをする。

yo webappコマンドで
npmの設定ファイルpackage.jsonと、
bowerの設定ファイルcomnponent.jsonと、
gruntの設定ファイルGruntfile.jsとを生成し、
index.htmlやcssなど他のファイルを配置する。

npm install && bower installコマンドを実行することで
gruntのライブラリやjavascriptライブラリを取得し配置する。

Webアプリケーションフレームワークを使うのであればそれぞれの配置の作法があるだろうから、
ちょっとしたjsを活用したWebサイトを作る時の最初の手間を省いたり、
クライアントサイドとサーバーサイドでくっきり分かれているような時にクライアントサイドを作るのに使うのがいいのではないだろうか。。

bowerでできること

クライアントサイドのjsライブラリのパッケージ管理・バージョン管理ができる。

gruntでできること

gruntも0.3と0.4でだいぶ作法や機能が変わったようだ。

jsのlint (文法チェック）
jsのtesting（プラグインで任意のテストドライバーを選択可能）
css preprocessorのコンパイル（rubyのcompass gemを呼び出す）
css & js build ( minify )
serverを立ててブラウザで開く
ファイルの変更を監視して更新
シェルコマンドの実行

以上のような、javascriptのコミット、リリース、デプロイにむけた準備全般が可能。
公開されているプラグインによってタスクを追加できる。

jsテストに関して、phantomjsは必要であればnpmパッケージのgrunt-lib-phantomjsなどの依存でバイナリがダウンロードされて実行可能な状態になるからインストールなどは気にしないでOK。

gruntはJavascript/Web開発に関しては非常に万能で強力なんだけど、設定ファイルは書くのが結構大変で、プロジェクトのディレクトリ構成などによってはどうしても他の人が書いたものそのままでは困ることがある。
そこである程度、標準的なディレクトリ構成などの作法を提供しようというのがyeomanの方向性だと思われる。

node.js開発環境を整理 yeomanの導入