読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

Yeoman を使ってみる

Yeomanは簡単にいうと「今風のWebアプリのための土台/基盤を作ってくれるツール」です。PHPRubyの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が大変便利で捗りそうです