最近フロントエンドのフレームワークとして、
人気のAngular.jsを勉強しようと思い、いろいろ調べてみました。
後、ちゃんと学びたいと思い、オライリーの本を買いました。
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というのをインストールするっぽいです。
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
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
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については、以下を参照ください。
参照：
紆余曲折ありましたが、無事起動しました。
今日はこれぐらいにしておきます。