2015年12月9日水曜日

bower + grunt + yo ⇒ yeoman によるWEBアプリのひな形作成


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/



0 件のコメント:

コメントを投稿