Yeomanは簡単にいうと「今風のWebアプリのための土台/基盤を作ってくれるツール」です。PHPやRubyのscaffoldと似た感じです。 Yeomanは以下の3つのツールをまとめたものです
Yo・・・ひな型生成ツール
Bower・・・JavaScriptライブラリ依存管理
Grunt・・・タスクランナー
まずはこれらをインストールしておきます。
◆事前準備
$ npm install -g bower $ npm install -g yo $ npm install -g grunt
◆Node.jsモジュール「ジェネレータ」
アプリのひな形を生成してくれるジェネレータがたくさんあります。 一覧は以下のコマンドで確認できますが、とても時間がかかるのでご注意。今回はスルーしてOKです。
$ npm search yeoman-generator
欲しいものがあったらそれを使ってもいいですし、今回は割愛しますが自分で作成することも可能です。
◆ジェネレーターを使用してAngularJSを使ったひな型を生成
今回はAngularJSのひな形を使ってみます。
$ yo [?] 'Allo your name! What would you like to do? > Install a generator Find some help Get me out of here!
「Install a generator」を選択 次のように検索するジェネレーターを尋ねられるので、「angular」と入力してエンターキーを押してください。
[?] Search NPM for generators: angular
すると、名前に「angular」が含まれるyeomanのジェネレーターがリストアップされます。generator-angularを選択してエンター。
[?] Here's what I found. Install one? (Use arrow keys) > generator-angular generator-angular-axiom generator-angular-beego generator-angular-bootstrap generator-angular-bootstrap-less generator-angular-brent
「Run the Angular generator」を選択してエンターキーを押します。
[?] 'Allo your name! What would you like to do? > Run the Angular generator (0.9.5) Run the Karma generator (0.8.2) Update your generators Install a generator Find some help
アプリ生成のオプションをいくつか聞かれますが、取りあえず下記のようにします。
Sass/Compassは使用しない
(No) Bootstrapは使用する
(Yes) AngularJSの追加モジュールは全てインストール(スペースキーで選択・非選択を指定)
[?] Would you like to use Sass (with Compass)? No [?] Would you like to include Bootstrap? Yes [?] Which modules would you like to include? (Press <space> to select) > angular-animate.js angular-cookies.js angular-resource.js angular-route.js angular-sanitize.js angular-touch.js
以上でひな形の生成は完了です。
◆動作確認
package.jsonやbower.json、Gruntfile.jsまで全て用意されているので、必要なパッケージをインストールしておきます。
$ npm install $ bower install
では起動してみます。
$ grunt serve
すると自動的にブラウザが立ち上がり、デフォルトの画面が表示されます。 以上です。簡単ですね。
ソース:
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 パッケージマネージャBowerが大変便利で捗りそうです