gulp-watchifyを使って差分監視によるJSの高速ビルド環境を構築する

はじめに

先日、watchifyについて以下の記事を書いたんですが、盛大に間違っていたので訂正いたします。

blog.bokuweb.me

ビルドは行われるもののまったく差分ビルドが行われていませんでした。どうしたら良いものかと調べていたら以下の記事を見つけ、参考にさせていただくことで解決しました。

gulp-watchify を試す | アカベコマイリ

watchifyとは？

watchifyはBrowserify をファイル監視つきで実行するモジュールなんですが、ただwatchするだけでなく差分だけビルドしてくれるありがたいやつらしいです。Browserify だとプロジェクト全体の再ビルドが行われるため、プロジェクトが大きくなると非常に時間がかかってしまいます。その問題をwatchifyは解決してくれます。

やりたいこと

以下のようなディレクトリ構造のときにsrc内の*.coffeeに変更があった場合、変更分のみ差分ビルドしprojectの直下にmain.jsを生成したい。

project
│  
│  inde.html
│  main.js
│  
├─src
│        main.coffee
│        hoge.coffee
│        fuga.coffee
│  
└─res
          hoge.png

これはcocos2d-JSプロジェクトのディレクトリを想定しています。ただし、別のプロジェクトにも適用できると思います。

gulpfile.coffee

上記の参考サイトによると、そのままbrowserifyにオプションを渡せるらしく、以下のように設定しました。これでmain.coffeeと依存関係にある*.coffeeファイルに変更が入ると自動的に差分ビルドがかかります。最高です。

また今回はgulp-plumberも使用するようにしました。plumberを使用しないと変更時にシンタックスエラーなどでビルドに失敗した場合、watchも終了してしまい再度gulp watchする必要が出てきます。plumberを使用すればビルド失敗時もエラー情報が吐かれるだけでwatchは解除されません。

・gulpfile.coffee

package.json

package.jsonはこんな感じ。

さいごに

これで、数秒かかったビルドがmsecオーダーになりました。間違いなどありましたらご指摘ください。