40
40

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-03-11

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

40
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
40