Carpe Diem

  Top > スポンサー広告> Node.js > Yeoman を使ってみる  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Yeoman を使ってみる

2014 - 08/13 [Wed] - 21:36

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が大変便利で捗りそうです

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。