今日は休日ですのでYEOMANサイトにあるコードラボをやってみます。このエントリーは「YEOMAN Advent Calendar 2014」12月6日の記事です。
YEOMAN Advent Calendar 2014 - Adventar
コードラボ(約1時間)では、YEOMANの助けを借りて、一から完全に機能するWebアプリケーションを構築します。またbruntとbowerを使用します。サンプルアプリはAngularJSを利用します。
Meet Yeoman
YEOMANはコマンドひとつかふたつで、Webアプリケーション全体またはコントローラとモデルのような個々のピースのための定型的なコードを書くことができます。YEOMANは、プレビュー用Webサーバーを起動します。編集しているファイルを監視しているのでSassを変更するとコンパイルします。YEOMANのユニットテストは、最小限に抑えコードを連結し、画像に加え、より多くの最適化を実行することができます!
Step 1: Set up your dev environment
yoのインストールとか色々環境設定します。
- Install prerequisites
- Install the Yeoman toolset
- Confirm installation
Step 2: Install a Yeoman generator
Install an AngularJS generator
$ npm install --global generator-angular@0.9.2
Step 3: Use a generator to scaffold out your app
Create a project folder
$ mkdir mytodo && cd mytodo
Access generators via the Yeoman menu
$ yo
sudo でないと動かない環境の場合 yo と打つのではなく「sudo yo angular」としないと困ったことになります。そうこうしているうちにインストール完了です。細かい手順はサイトを見てください。
Step 4: Review the Yeoman-generated app
各ディレクトリの意味やファイルの内容がサイトに記載されています。読みましょう!
Step 5: Preview your app in the browser
アプリケーションサーバを起動します。とても簡単に起動することができます。
$ grunt serve
簡単に...
〜 省略 〜 Running "clean:server" (clean) task Running "wiredep:app" (wiredep) task Warning: ENOENT, no such file or directory '/Users/albatrosary/Project/mytodo/app/bower.json' Use --force to continue. Aborted due to warnings. Execution Time (2014-12-06 02:42:48 UTC) loading tasks 19ms ▇▇▇▇▇▇▇▇▇▇▇ 7% clean:server 6ms ▇▇▇▇ 2% wiredep:app 237ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 89% Total 266ms $
簡単ではなかった...
気を取り直して npm install -g generator-angular からやり直し。指定されたバージョンジェネレータでは「簡単」にはいかないらしい(後日調査)
Step 6: Start writing our AngularJS application
指示のあるとおり views/main.html と scripts/controllers/main.js を変更していきます。
追加ボタン登録して:
削除もいれます:
Step 7: Use Bower to install packages
ここまででひと通り機能追加は終了です。 普段使わないコマンド:
$ bower list bower check-new Checking for new versions of the project dependencies.. mytodo#0.0.0 /Users/albatrosary/Project/mytodo ├── angular#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) ├─┬ angular-animate#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 (latest is 1.3.6-build.3673+sha.ee42cfe) ├─┬ angular-cookies#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-mocks#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-resource#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-route#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-sanitize#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-scenario#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ angular-touch#1.3.5 (1.3.6-build.3673+sha.ee42cfe available) │ └── angular#1.3.5 ├─┬ bootstrap#3.3.1 │ └── jquery#2.1.1 ├── es5-shim#4.0.5 └── json3#3.3.2 $
今回は「angular-ui-sortable」を使うようです。手順にそっていきます!(この時点でかなりハイテンション)
$ bower install --save angular-ui-sortable $ bower install --save jquery-ui
インストールが終わったら app.js を書き換えます
'use strict'; /** * @ngdoc overview * @name mytodoApp * @description * # mytodoApp * * Main module of the application. */ angular .module('mytodoApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'ui.sortable' ]) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl' }) .otherwise({ redirectTo: '/' }); });
HTMLファイルも書き換えこの章は終了です
見た目は変わってませんがHTMLの表現が変更されています。是非ソースを比較されるといいのではと思います。
Step 8: Test with Karma and Jasmine
さてテスト!重要です。すごく大事!
インストール時に途中でコケていたkarmaインストールもここでおこない
$ npm install karma-phantomjs-launcher karma-jasmine grunt-karma --save-dev
テストタスクの実行です。モジュールもテキストに従い修正します。
$ grunt test Running "clean:server" (clean) task Cleaning .tmp...OK Running "concurrent:test" (concurrent) task Running "copy:styles" (copy) task Copied 1 files Done, without errors. Execution Time (2014-12-06 03:32:40 UTC) loading tasks 2ms ▇▇▇▇▇▇ 11% copy:styles 15ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 83% Total 18ms Running "autoprefixer:dist" (autoprefixer) task File .tmp/styles/main.css created. Running "connect:test" (connect) task Started connect web server on http://localhost:9001 Running "karma:unit" (karma) task INFO [karma]: Karma v0.12.28 server started at http://localhost:8080/ INFO [launcher]: Starting browser PhantomJS WARN [watcher]: Pattern "/Users/albatrosary/Project/mytodo/test/mock/**/*.js" does not match any file. INFO [PhantomJS 1.9.8 (Mac OS X)]: Connected on socket QtGfZVOvshBCPfMsqA_P with id 6226614 PhantomJS 1.9.8 (Mac OS X): Executed 2 of 2 SUCCESS (0.001 secs / 0.007 secs) Done, without errors. Execution Time (2014-12-06 03:32:39 UTC) concurrent:test 1.5s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 39% autoprefixer:dist 42ms ▇▇ 1% karma:unit 2.3s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 59% Total 3.9s $
Step 9: Get ready for production
テストも無事通りましたので、リリースするためにビルドし、ビルドしたものを表示します:
$ grunt $ grunt serve:dist
Step 10: Make Todos persistent with local storage
todoリストをローカルストレージへ登録します。テストに従いサクッと! 再びテストを回して終了です!
Congratulations!
テストも含めひと通りアプリケーション開発プロセスの終了です。若干YEOMANがエラーを出すので対応で30分ほど時間を超過しましたが約2時間もあれば十分楽しめます。是非チュートリアルを。