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

tyoshikawa1106のブログ

- Force.com Developer Blog -

YEOMANの使い方を勉強しました

Yeoman

f:id:tyoshikawa1106:20151017134128p:plain

Getting started with Yeoman | Yeoman

Installing yo and some generators

はじめに必要なツールをインストールします。

$ npm install -g yo bower grunt-cli gulp

エラーメッセージが表示されたけど、実行はされてる..?
f:id:tyoshikawa1106:20151017134810p:plain

Basic scaffolding

利用には次のインストールも必要みたいです。

$ npm install -g generator-webapp

これはうまく行きました。
f:id:tyoshikawa1106:20151017135038p:plain


作業ディレクトリを用意します。

$ cd desktop
$ mkdir my-yo-project
$ cd my-yo-project

f:id:tyoshikawa1106:20151017135253p:plain


次のコマンドを実行します。

$ yo webapp

f:id:tyoshikawa1106:20151017135508p:plain


Enterキーで進めるとbower installコマンドなどが自動で実行されました。
f:id:tyoshikawa1106:20151017135802p:plain


途中いくつかエラーメッセージ的なものが表示された気がするのですがひとまず実行完了。
f:id:tyoshikawa1106:20151017135926p:plain


雛形ファイルみたいなのが作成されていました。
f:id:tyoshikawa1106:20151017140045p:plain

Example: Scaffolding an AngularJS app

上記方法とは別にAnuglarJS用の雛形を作成する方法についてです。

$ npm install -g generator-angular

f:id:tyoshikawa1106:20151017140530p:plain


ジェネレーターのインストールができたら次のコマンドを実行します。

$ yo angular

Which modules would you like to include? のところはSpaceキーで追加したいライブラリを選択できます。
f:id:tyoshikawa1106:20151017140726p:plain


あとは画面の指示どおりに進めていけば、雛形ファイルの生成が実行されました。
f:id:tyoshikawa1106:20151017141256p:plain

補足

次のようなコマンドの実行の仕方もあるみたいです。

$ yo angular --coffee

または・・・

 yo angular:controller myController
$ yo angular:directive myDirective
$ yo angular:filter myFilter
$ yo angular:service myService


ただしく使えてるか少し自信がないのですが、雛形ファイルの作成は実行できたのでYEOMANがどんな感じかは確認できたと思います。