Yeoman+angularjsそしてcorodva

Yeomanで作ったangularjsのひな型をcordovaアプリにしてしまう。

Yeomanでangularjsの導入で、angularjsのひな型は作れるけど、これをcordovaではハイブリッドアプリにしたいとき、最終的な出力先が、distだと困るよね。wwwでないと。そういう時は、gruntfile.jsを変更する。例えば、gruntfile.jsの10行目付近の下記の部分書き換える。

これで、

ばっちりじゃん

実機のデバッグは?

これで、実機で動くのも確認できるし。と思うのもつかの間、chromeでリモートデバッグをしてもminify化されたソースコードなんて正直読めるわけがない・・・。

そういうわけで、デバッグするためのモードを作らなければならない。そういう時は、gruntfileでコピータスクを作ってしまう。コピーは、appディレクトリとbower_componentsディレクトリを全部wwwにコピーしてしまえばいい。

上の記述を足した状態で

で、minifyされていない状態で実機デバッグできる。

そもそもbuildする必要あるの?

さて、コピーすればcordovaで動くんであれば、buildなんてする必要ないんじゃなかろうか?と思うけど、実際buildコマンドでファイルサイズが小さくなる。特にgoogle playにアップするパッケージファイルが変に大きいと、ダウンロードも躊躇されちゃうんじゃないだろうか?じゃあ。実際のところ、単純コピーとgrunt buildした時のパッケージファイルのサイズってどれぐらい違うのか調べてみた。条件は、yeomanでangularjsのひな型を作って、ui-bootstrapを追加しただけの状態のapkファイルのサイズ。

コピーだけの時 grunt build
4.5M byte 2.0M byte

半分近く違うじゃん!。やっぱり、minify化は効果があるみたい。リリースの時だけgrunt buildを使用して、後は、さっき作ったコピーコマンド grunt cordova-debugをするのがよさそうだ。

まとめ

ブラウザ上で確認したいときは、

実機でデバッグしたいときは、

実機でリリース版を動かしたいときは、

番外編で、cordovaプラグインも含めてブラウザでデバッグするときは

こんな感じの開発手順がいいんじゃないだろうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">