watchifyでファイルの監視を行う

watchifyでファイルの監視を行う

babelifyで始めるES6ではBrowserify/babelifyを利用してES6を利用する方法を解説しましたが、gulp-watchなどを利用してファイル変更のトリガーでBrowserifyを実行すると非常に時間がかかってしまいます。そこで、watchifyを利用することで差分管理がされ高速にコンパイルすることが可能になります。

利用に至っては以下のコマンドでwatchifyとexorcistのインストールを行います。(exorcistは後ほどSourceMapを出力するのに必要)

npm i -g watchify
npm i -g exorcist

そうすると以下のコマンドでwatchifyによる監視が可能になります。
(./src/app.jsとそこでrequireしている各ファイルで変更があったタイミングで./dist/app.jsを生成)

watchify ./src/app.js -o ./dist/app.js

ただ、このままだとコンパイル状況がコンソール上に表示されないので-vオプションをつけるとコンパイル時間などがコンソール上に表示されるようになります。

watchify ./src/app.js -o ./dist/app.js -v

Babel/babelifyを利用したい場合は-tオプションでbabelifyを指定しましょう。

watchify ./src/app.js -t babelify -o ./dist/app.js -v

SourceMapを出力したい場合は-dオプションとexorcistを利用してSourceMapが出力できます。
以下のサンプルでは./dist/app.js.mapというSourceMapファイルが出力されます。

watchify ./src/app.js -t babelify -o 'exorcist ./dist/app.js.map > ./dist/app.js' -d -v

Browserifyを利用している場合にSourceMapを出力するとブラウザのコンソールが出すスクリプトの行数がコンパイル後のフィアルの行数ではなくコンパイル前のファイルの行数を指定してくれるようになります。

結構な文字数になったのでWatchのたびに上のコマンドを入力するのは面倒くさいのでpackage.jsonのscriptsに以下のコマンドを登録しておきます。

"scripts": {
  "watch:js": "watchify ./src/app.js -t babelify -o 'exorcist ./dist/app.js.map > ./dist/app.js' -d -v"
},

そうすることでnpm run watch:jsとコマンドを入力するだけwatchifyによるファイルの監視がスタートします。

これからは、すべてのタスクをgulpなどでやろうとすると大変になりますので適材適所なツールを使い分ける必要がありますね。

関連エントリー

babelifyでv7.x系を利用する
タスクランナーgulp入門
Gruntで始めるWeb制作の自動化
gulp.spritesmithを便利にカスタマイズ
grunt-webfontで書き出されるwebフォントの文字列を変更

スポンサードリンク

«今どきのCSS3グラデーションの指定方法 (2015年版) | メイン | フロントエンドのテクニカルディレクションに求められるスキル»