概要
browserifyって便利だけど待ち時間ストレスだなあと思い調査したところ、差分ビルドしてくれるbrowserifyのラッパーwatchifyというものを知ったので、cocos2d-JSプロジェクトで試してみました。
*.coffeeを変更するたびに自動でbundle.js(今回はmain.js)を生成することを目標とします。
例はcocos2d-JSですが、他のプロジェクトでも同様に使用できます。
cocos2d-JSではproject.json内のjsListにコンパイル対象のjsファイルを以下のように追加していきます。
"jsList" : [ hoge.js fuga.js ]
この方式だと、新規に追加したjsをproject.jsonに追加するのも手間、依存関係も分かりにくいし、coffeeで書いた場合他のファイルから参照したいシーンやレイヤーを@AppScene = cc.Scene.extendのようにグローバルに配置する必要あるし、だったらwatchfyを使うしかないじゃないってことで試してみた。
参考記事
スケルトン
スケルトンを作ってみた。
色々はいってますけど、基本的に必要なのはgulpfile.coffee、package.jsonです。
使い方
入っていない場合、gulpをインストールしておきます。
npm i gulp -g
新規プロジェクトをcocosコマンドで作成し、以下のzipを解凍後上書きしてnode_modulesをインストール。
https://github.com/bokuweb/cocos2d-JS_skeleton/archive/gh-pages.zip
ディレクトリ内のmain.js、src/app.js、src/resource.jsを削除しておいてください。
npm i
監視します。
gulp watch
これでsrc/*.coffeeに変更があるたびに差分ビルドし、ディレクトリのトップにmain.jsが生成されます。
これにより
- 新規に追加した
jsをproject.jsonに追記する必要はなくなる。 - シーンやレイヤーを呼ぶのに
HogeScene = require 'hoge'のようにrequireが使える。 - テストもしやすそう。
mohca-phantomjsとcocos2d-JS Liteで上手いことできるだろうか。
gulpfile.coffee
最初は以下で動かしていたんですが、main.jsが生成されるものの、変更内容が反映されていないケースがちらほらでました。他のコンパイル状況にかかわらず、main.jsが生成された時点でwatchifyが走ってしまい正しく反映されないケースがあるんでしょうか。
以下のように変更してみました。
gulp.watchでsrc/*.coffeeを監視し、変更があればcoffeeをjsにコンパイル。
その後、watchifyでsrc/main.jsを基準に差分ビルドし、トップディレクトリにmain.jsを生成するという流れっぽい。
watchifyのwatchオプションは切っておいて、コンパイル後にwatchifyタスクを読んでいる。
正直完全に理解できてませんが、意図通り動いているっぽい。
15.5.22 追記
よくなかったです。watch : offにするとファイル監視だけでなく、差分ビルドもoffになるようです。訂正記事を書きましたので参照してください。
その他
browserifyによって挿入される記述がAndroidやiOSなどネイティブ動作のときに引っかからないか心配だったけど今のとこ動いてる。
