Edited at

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

More than 5 years have passed since last update.


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

Ubuntuのapt経由で入れていたnode.jsが古くなっていたので

sudo aptitude purge nodejs nodejs-dev npm

で消して

http://nodejs.org/

で最新版を確認

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の方向性だと思われる。