browserify + watchify + gulp
browserify + gulpでビルドするときに,よく差分ビルドをするためにwatchifyを使うことを推奨している記事は結構多い.そういう環境でビルドする方法は こちら あたりを参考にしてもらえると嬉しい.
これが,watchifyを入れておかないと,ファイルの変更を検知してくれないので,毎回自分でビルドコマンドを叩かなきゃいけないし,差分ビルドにならないので遅い.そんな開発環境は嫌だ.というわけで,gulpのビルドタスクにwatchifyを組み込んでおくことは,本当にいろんなところで紹介されている.
nfsマウントしたディスク上のファイル変更が検知されない
前述のような例に沿って同じようなgulpタスクを作ってみた.ただ,特に理由はないのだけれど,vagrantで動かしていた.
jsのソースファイルは,vagrantのshared folderを使って,ホストOS側の適当なディレクトリに放り込んでいる.vagrantはそれをnfsマウントして利用していた. この場合,jsのソースファイルの編集はホストOS側で行う.しかし,サーバはvagrant側で動かしているのでjsのビルドもvagrant側で行ってほしい.
そうすると,vagrant側のgulpはwatchifyを動かしていても,ファイル変更を検知してくれなかった.
これは,watchifyに poll
オプションを与える必要がある.
var w = watchify(b, { poll: true });
http://stackoverflow.com/a/30743525/4545174
これでホストOS側で変更したファイルの変更検知を,watchifyが行ってくれるので差分ビルドが走るようになった.
ちなみに遅い
ビルドが遅いのではなくて,変更検知にラグがある…….これはnfsマウントしているから仕方ないのか?
同じことを思う人はいたらしい.
Watchify polling very slow on Vagrant Machine
こういう記事,あまり出回っていないので,多分近年のフロントエンド開発をする人はvagrantとか使わないのかな……. *1
*1:ここに脚注を書きます