soohei.net

これまでに書いたリサーチ系ポスト

・環境構築メモ (1) Gulp
・環境構築メモ (2) Grunt
・環境構築メモ (3) RequireJS
・環境構築メモ (4) Bower
・フレームワーク習得メモ (1) AngularJS
・フレームワーク習得メモ (2完) Ionic
・環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
・wiredepを無効に
・useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

RequireJSの処理としては、

・angularは、exportの記述が必要
・domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) { })」のように囲めば解決は出来る)

となりました。

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、


ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}


define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
・http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
・http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
・http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)

Bowerは、パッケージマネージャーと呼ばれていて、
開発者がコマンドを叩くことで、configファイルに定義された、
必要なコンポーネント(外部ライブラリ) を全てオンラインから集めてきてくれる。
(node.jsのnpm installのように、bower installというコマンドを叩く)

例えば、modernizerを使いたかったら、bower install modernizer。

これを、今までの soohei/grunt-requirejs-seed に組み込んだものが、

soohei/grunt-bower-requirejs-seed

.bowerrc というファイルで、bowerのコンポーネントを配置する場所を定義できるので、
今回は、 “directory”: “www/assets/bower_components/” を指定。

また、Grunt内の bower というタスクで、RequireJSのベースとなるファイルのパスを指定でき、
target: { rjsConfig: ‘www/assets/js/app.js’ }
というようにしておくと、タスク実行時に、各コンポーネントへのパスをapp.jsに書き込んでくれる。

その他のタスクの連携は今までと同じ。

これで開発時の、コンポーネント (外部ライブラリ) のダウンロードと、ソースコードのビルドの自動化、
Webサイトロード時の、コンポーネントの依存関係やロード順序の交通整理の自動化、
が実現できました。

こういった目的を持ったワークフローのタスク定義や、フレームワーク (AngularJS, Ionic…) の導入を行って、
さらにプロジェクトのひな型生成をやってくれるのが、Yeomanのようです。(Yo + Bower + Grunt)

ここまで手動で積み重ねたものが、Yeomanによってどんな風になるか、明日勉強します。
勉強結果を書く予定の場所はここ。

Yeoman + AngularJS + RequireJS (+ Ionic)

環境構築メモ (4) Bower