Yeomanってなに？

まず初めに、開発を行うための環境構築で、Yeomanというツールを使うぽいです。
Yeomanとは、以下サイトに書いてある通りらしいです。
ちなみに読み方は、「ヨーマン」らしいです。

参照：

Yeomanのあれこれ

Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。
yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。voloはこれらをひとつでやるけど、Yeomanは各種ツールが合体して一連のフローを提供する感じっぽい。

環境構築

Yeomanの公式ページにスタートアップガイドがあったので、
それに沿ってやってみました。

npm install --global yo bower grunt-cli

YeomanとbowerとGruntをインストールするぽいです。

yo --version && bower --version && grunt --version

それぞれのバージョンは、以下の通りです。

Yeoman 1.4.2
bower 1.3.12
grunt-cli v0.1.13
grunt v0.4.5

次に、generator-angularというのをインストールするっぽいです。

generator-angularとは、

lets you quickly set up a project with sensible defaults and best practices.

らしいです。
自動でプロジェクトの雛形を作ってくれるようなイメージですかね。

npm install --global generator-angular@0.9.2

無事インストールが完了しました。

次に、angularのプロジェクトを作成するために、
yoコマンドで雛形のプロジェクトを作ります。

対話形式でいろいろ選択肢が出てきますが、
基本全部yesで構築してみます。

公式サイトでは、yo angularというコマンドを打っているんですが、
それを打つと、

yo anguler

Error anguler 

You don't seem to have a generator with the name anguler installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 15 registered generators run yo with the `--help` option.

こんなエラーがでます。

yoコマンド単体で、プロジェクトの雛形が作成できたので、問題ないと思います。公式サイトが古いのかな。

さっそくサーバを立ち上げてみました。
grunt serve

grunt serve
Running "serve" task

Running "clean:server" (clean) task

Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/Users/takuhou/Desktop/project/github/test/app/bower.json' Use --force to continue.

Aborted due to warnings.


Execution Time (2015-01-19 23:41:09 UTC)
loading tasks    3ms  ▇▇▇ 2%
clean:server     4ms  ▇▇▇▇ 3%
wiredep:app    133ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 94%
Total 142ms

しかし、エラーでダメでした。
Warningのメッセージでググったところ、

Warning: ENOENT, no such file or directory **/app/bower.json #100

Gruntfile.js内のcwd記述部分をコメントすると動くらしい。

Before

Gruntfile.js

163     // Automatically inject Bower components into the app
164     wiredep: {
165       options: {
166         cwd: '<%= yeoman.app %>'
167       },
168       app: {
169         src: ['<%= yeoman.app %>/index.html'],
170         ignorePath:  /\.\.\//
171       },
172       sass: {
173         src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
174         ignorePath: /(\.\.\/){1,2}bower_components\//
175       }
176     },

After

Gruntfile.js

163     // Automatically inject Bower components into the app
164     wiredep: {
165       // options: {
166       //   cwd: '<%= yeoman.app %>'
167       // },
168       app: {
169         src: ['<%= yeoman.app %>/index.html'],
170         ignorePath:  /\.\.\//
171       },
172       sass: {
173         src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
174         ignorePath: /(\.\.\/){1,2}bower_components\//
175       }
176     },

にしたら、先ほどのWarningのメッセージは表示されなくなったんですが、
compassがないとエラーメッセージが表示されたので、インストールしました。

gem install compass

ちなみにrubyのバージョンは、
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

です。

compassについては、以下を参照ください。

参照：

Compassを使ってみる

紆余曲折ありましたが、無事起動しました。

今日はこれぐらいにしておきます。