AngularJSでの開発環境を作る（yeomanで環境構築）
本格的にAngularJSで開発をしていくための環境と整えていきたいと思います。
開発環境の作成には、yeomanというツールが便利みたいです。
早速インストールです。npmを使えば楽ちんですね。
$ npm install yo -g
$ which yo
/usr/local/bin/yo
$ yo --version
1.1.2
入りました。ちなみに、最初に起動した時に以下のようなメッセージが表示されました。
[?] ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
==========================================================================:
よりより方法を探しているから、匿名でレポートしてね？って感じですね。
この後インストールしようと思っていたgruntとbowerもインストールされていました。
$ which grunt
/usr/local/bin/grunt
$ grunt --version
grunt-cli v0.1.13
$ which bower
/usr/local/bin/bower
$ bower --version
1.3.3
yoemanにはAngularJS用のテンプレートが用意されているようです。せっかくなのでこちらも入れます。
$ npm install -g generator-angular
テキトーなディレクトリでまずは試しに作ってみましょう。
$ yo angular
_-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
[?] 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-resource.js
⬢ angular-cookies.js
⬢ angular-sanitize.js
⬢ angular-route.js
利用するモジュールを選択できるみたいですね。
とりあえずBootstrapは使いたいので、選択します。angular-resourceとangular-sanitizeは利用用途が高いのでYesです。angular-routeはangular-uiを使うのでこちらは使いません。angular-cookiesは・・・今のところ使うシーンが想像できません・・・
実際に動かしてみましたが、いくつかエラーが出ておりました。直下にあるnpm-debug.logというファイルを見ろよと言われましたが・・・でかい・・・
なんとなく見てみると、どうやらkarmaあたりのインストールで失敗しているみたいです。
前回グローバルインストールしたが悪さしている気がします・・・npm uninstall karma -gで削除します。あと、ネットにて「npmのキャッシュも綺麗にしてからやってみな？」という書き込みもありましたので、そちらも試してみます。コマンドはnpm cache clearです。
再度実行！
$ yo angular
_-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `
※以下略
無事成功しました！やった！
※前回の記事の当該箇所は神速で削除・・・
※この後、別のディレクトリで実行したらやはりkarma周りの箇所で失敗したり、別のところで失敗したり、yeomanを再インストールしたらうまくいったりしました行かなかったり・・・再現性が謎なので下記メッセージが最後に出てなければ成功とします・・・
npm ERR! Additional logging details can be found in:
npm ERR! /path/to/directory/npm-debug.log
npm ERR! not ok code 0
その他AngularJSのgeneratorについての詳細は以下に詳しく書いてあります。（英語だけど問題ないよね）
https://github.com/yeoman/generator-angular
では、動かしてみましょう。
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Cleaning .tmp...OK
Running "bowerInstall:app" (bowerInstall) task
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Copied 1 files
Done, without errors.
Execution Time (2014-05-xx xx:xx:xx UTC)
loading tasks 3ms ▇▇▇▇▇▇▇▇ 16%
copy:styles 15ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 79%
Total 19ms
Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:9000.
Running "watch" task
Waiting...
ターミナルが占拠され、ブラウザが立ち上がりました。ちなみにこのページはapp/index.htmlが表示されています。
また、Running "watch" taskとあるように、この状態でファイルを編集し、保存すると自動的にページに反映がされます。便利ですね。
※これはpackage.jsonにgrunt-contrib-watchが入っていて、かつGruntfile.jsが書いてあるからですね。この辺の深堀りも追々していきたいと思います。
続いてテストをしてみます。
$ grunt test
結果を抜粋。
Running "karma:unit" (karma) task
Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine) Use --force to continue.
Aborted due to warnings.
失敗しています・・・
ネットであちこち調べましたが、どうやらkarmaのjasmineのモジュールが正しく入っていないことが原因みたいですね。
※generator-karmaのバグのようで、一応報告されているみたいですが、「I'll try and fix it later. thanks」で止まってます・・・修正に期待。
まぁ以下のコマンドで解決しますので、大きな問題ではないですね。
$ npm install karma-jasmine --save-dev
$ npm install karma-chrome-launcher --save-dev
karma-chrome-launcherはブラウザごとにいろいろなlauncherが用意されているみたいです。調子に乗って色々と入れてみました。（もちろんブラウザ本体を入れることもお忘れなく）
$ npm install karma-safari-launcher --save-dev
$ npm install karma-firefox-launcher --save-dev
他にもいろいろなluncherがあるみたいなので、以下のサイトを調べてみると見つかると思います。
https://github.com/karma-runner
テストで起動するブラウザを切り替えるためにはkarma.conf.jsを編集します。
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],
コメントがあるので、わかりやすいですね。とりあえずFirefoxを追加してみます。
browsers: ['Chrome', 'Firefox'],
再度実行します。
Firefox 29.0.0 (Mac OS X 10.9): Executed 1 of 1 SUCCESS (0.023 secs / 0.014 secs)
Firefox 29.0.0 (Mac OS X 10.9): Executed 1 of 1 SUCCESS (0.023 secs / 0.014 secs)
Chrome 34.0.1847 (Mac OS X 10.9.2): Executed 1 of 1 SUCCESS (0.039 secs / 0.037 secs)
TOTAL: 2 SUCCESS
無事に成功しました。（なんでFirefoxの結果が2行出てるんだろ・・・）
今回はここまでです。 次は実際に作成されたファイルを見ながら、提供されたタスクとかを調査してみたいと思います。
