Watchify でファイルを監視する

Browserify は CommonJS 方式で分割された JavaScript を1つにまとめて出力してくれるコマンドです。大変便利なのですが、実際の開発中はファイル編集するたびにターミナルでコマンド叩いたりするのは面倒で生産性も上がりません。

Watchify はファイルを監視して自動で Browserify を実行してくれるコマンドです。これを使うとスムーズに Browserify を使った開発を行えます。

必要な知識

Watchify は npm でインストールできます。

$ npm install -g watchify

すごく単純な JavaScript を用意して試してみます。

// a.js
console.log('A');
require('./b');

// b.js
console.log('B');

このプログラムを watchify で1つにまとめます。

$ watchify a.js -o bundle.js

a.js が変換する JavaScript 、 -o bundle.js で bundle.js に結果を出力するよう指定しています。これを実行すると特に何もおこらずに止まるはずです。別のターミナルを立てて確認すると bundle.js ができていることがわかります。

-v オプションを指定すると browserify が実行されるたび画面にログが表示されます。コンパイルされたタイミングに気づきたい場合は指定しておきましょう。

Watchify は Ctrl + C で終了できますが、今はまだ終了させず他のターミナルから b.js を編集してみます。

$ echo "console.log('B2');" >> b.js

ただ追記しただけです。 Watchify をつけっぱなしで、これを実行すると bundle.js も勝手に新しくなります。

Watchify をつけっぱなしのまま続けます。次は c.js を作ってみます。

$ echo "console.log('C');" > c.js

a.js も b.js も c.js には依存していないので何も起こりません。ここで b.js を c.js に依存させてみます。

$ echo "require('./c');" >> b.js

b.js が変更されたので今度は Watchify が bundle.js を更新したはずです。

$ echo "console.log('C2');" >> c.js

さっきは c.js を編集しても何も起きませんでしたが今度はコンパイルされます。このように新しく依存されたファイルもうまく監視してくれます。

-o オプションで出力先のコマンドを指定しました。 -o にはコマンドも渡すことができます。具体的には | か > という文字が含まれる場合にコマンドだと解釈されます。

$ npm install -g uglifyjs
$ watchify a.js -o 'uglifyjs -cm > bundle.min.js'

uglifyjs を使って minify されます。