Browserify／Watchifyとgulpを組み合わせた自動更新
以下ではより実践的な例として、モジュールのJavaScriptコードをWatchifyに監視させて、変更時に変換処理とブラウザの自動更新を行うサンプルを説明します。このサンプルではタスク実行環境gulpとBrowserify／WatchifyのAPIを組み合わせて利用します。なおgulpの利用法については本連載の過去記事で紹介していますので参考にしてください。
gulpの設定ファイルをリスト10に示します。
// gulpの指定 ...（1）
var gulp = require("gulp");
// LiveReloadプラグインの指定 ...（2）
var liveReload = require("gulp-livereload");
// BrowserifyとWatchifyの指定 ...（3）
var browserify = require("browserify");
var watchify = require("watchify");
var source = require("vinyl-source-stream");
// Browserify／Watchifyタスクの定義 ...（4）
gulp.task("browserify", function() {
// Browserifyオブジェクトの生成 ...（5）
var b = browserify({
entries: ["js_src/index.js"],
cache: {},
packageCache: {},
plugin: [watchify] // watchifyプラグインを指定 ...（5a）
});
// Browserify処理を行うメソッド ...（6）
var bundle = function() {
return b.bundle() // ...（6a）
.pipe(source("bundle.js")) // ...（6b）
.pipe(gulp.dest("js")); // ...（6c）
};
// JavaScript更新時にBrowserifyの処理を再実行 ...（7）
b.on("update", bundle);
// 処理結果を返却
return bundle();
});
// 変更監視タスクの定義 ...（8）
gulp.task("watch", function() {
// LiveReloadサーバーを開始
liveReload.listen();
// HTML/JavaScriptファイルが変更されたらliveReloadタスクを実行
gulp.watch(["./*.html", "js/*.js"], ["liveReload"]);
});
// liveReloadタスクの定義 ...（9）
gulp.task("liveReload", function() {
// ブラウザリロード
liveReload.reload();
});
// defaultタスクの定義 ...（10）
gulp.task("default", ["browserify", "watch"]);
（1）はgulp本体、（2）はブラウザリロードを行うLiveReloadプラグインの指定です。（3）でBrowserifyとWatchifyを指定しています。「vinyl-source-stream」は、Browserifyの処理結果をファイルに保存するためのモジュールです。
（4）がBrowserify／Watchify処理のタスク定義です。まず（5）でBrowserifyオブジェクトを生成するとき、（5a）でWatchifyをプラグインとして指定します。（6）がBrowserifyの処理です。（6a）で変換処理を行って（6b）でファイル名を設定し、（6c）でjsフォルダに書き込みます。（7）はBrowserify対象ファイルの変更イベント（update）発生時にbundleメソッドを再実行する記述です。
（8）、（9）はgulpによるファイル監視処理です。Browserify／WatchifyによりJavaScriptファイルがjsフォルダに書き込まれたり、HTMLファイルが直接修正されたりすると、gulpのファイル監視によりブラウザがリロードされます。（10）はdefaultタスク定義です。
WatchifyはBrowserify処理対象ファイルのうち修正されたモジュールだけを差分で変換する機能を持っており、速度面で有利です。この利点を活かして、サンプルではBrowserifyが処理するファイルを直接gulp.watchで監視せず、Watchifyで監視して自動変換されたファイル（bundle.js）の変更をgulp.watchで監視しています。
リスト10のタスクを実行してモジュールを修正すると、Browserifyの自動変換が行われたあとでブラウザが更新され、修正が反映されます。
まとめ
本記事ではBrowserifyについて、オプションやAPI、他ツールとの連携などの活用例を紹介しました。Browserify自体は「Node.jsのモジュール管理形式記述を含むJavaScriptを変換してWebブラウザで動作させられる」シンプルなツールですが、さまざまな呼び出し方で深く使いこなしていけるツールといえます。
前回記事でも紹介したようにJavaScriptのモジュール管理方式は様々なものが存在し、Browserifyはその中でも古いほうに分類されます。対照的に、次世代JavaScript規格「ECMAScript 2015」のモジュール管理方式は最も先進的なものといえます。ECMAScript 2015ではリスト11のようにexportキーワードで外部に公開する処理を記述します。
// lib.jsに記述
export function func1(){/* func1の処理 */ }
export function func2(){/* func2の記述 */ }
一方、利用する側はリスト12のように、importキーワードでモジュールを導入します。
import {func1, func2} from "lib"; // lib.jsを参照
func1(); // func1を利用
func2(); // func2を利用
ECMAScript 2015が普及すれば、標準環境でモジュール管理が利用できるようになり、Browserifyのような変換処理が不要になります。長期的にはECMAScript 2015の方式が標準になることは疑いないところですが、ブラウザの対応に時間がかかる点や、すでにモジュールの過去資産がある点から、Browserifyを含めた従来のモジュール管理ツールがすぐに使われなくなるわけではありません。当面の間はサポートするブラウザの環境や利用したいモジュールの充実度を見ながら、複数の方法を使い分けていくことになるでしょう。
