bower、grunt、yoを導入し、WEBアプリケーションのひな形をyeoman(ヨーマン)で作成するところまでの手順を残しておく。
◆ bower
bowerフロントエンドライブラリ、例えばAngularJSなどの依存性の管理ツールである。
(bowerのインストール)
$ sudo npm install -g bower
(初期化)
アプリケーションのルートディレクトリへ移動しておく。
$ mkdir myapp
$ cd myapp
$ bower init
bower.json
が作られる。
(bowerで管理させるモジュールのインストール)
この後利用するangularモジュールをインストールする。
saveオプションを付けているので、設定ファイルbower.jsonに追記される。
$ bower install angular --save
ここへ保存される。
$ ls bower_components/
npmのnode_modulesに相当するフォルダである。
アプリから使う場合はこう指定する。
<script src="bower_components/angular/angular.min.js"></script>
◆ grunt
JavaScript用のビルドツールである。
(grunt操作用のコマンドラインツールのインストール)
grunt本体ではない(cli: Common Language Infrastructure)。
$ sudo npm install -g grunt-cli
(package.jsonの作成)
gruntをインストールする前に、nodejs用のパッケージを管理するpackage.jsonを作成しておく。
rubyでいうところのgemfileである。
$ npm init
package.json
が作られる。
(grunt本体とプラグインのインストール)
grunt本体とコードの圧縮を担当するプラグインなどをインストールしてみる。
gruntで使うプラグインもpackage.jsonで管理したいため、save系オプションを付与する。
--save: アプリそのものの実行で利用するパッケージ
--save-dev: アプリ開発で利用するパッケージ
package.json内の下の違いである。
"dependencies": {}
"devDependencies": {}
grunt関係は--save-devを指定すると理解しておけば良い。
$ npm install grunt grunt-contrib-cssmin grunt-autoprefixer grunt-contrib-uglify grunt-contrib-imagemin grunt-contrib-watch -save-dev
インストールしたプラグインはこの配下で管理される。
node_modules
このディレクトリを削除しても依存関係を読み取りインストールしなおしてくれる。
$ node install
(Gruntfile.jsファイルの作成)
$ vi Gruntfile.js
この中で記載していけばよい。
◆ yo, yeoman
yeomanはフレームワークに対応したアプリケーションのひな形を作成するyoを中心に、grunt、bowerといったソフトウェアから構成されるツールセットである。
gruntとBowerはすでに使用できる。ひな型生成ツールであるyoをインストールし、yeomanを使ってアプリのひな型を生成する。
(gemのアップデート)
まずgemを先にアップデートしておく。
$ sudo gem update --system
compassも利用するので入れておく。
$ sudo gem install compass
(yeomanのインストール)
$ sudo npm install -g yo
今回はAngularJSを使うことを想定する。またその雛形を作成するためのジェネレータもインストールする。
$ sudo npm install -g generator-angular
(ひな形の作成)
$ yo angular
(アプリケーションの起動)
gruntサーバを起動する。
※オプションは"Gruntfile.js"内を参照のこと。
$ grunt serve
アクセスできるはずである。
http://localhost:XXXX/
