Browserify + gulpではまったのでメモ

browserifyをgulpタスクとして実行しようとしたところ，
サンプルとしてWeb上で見つけたものではうまく動かなかったため，対処法をまとめておく．
なお，gulpについてはド素人のため，誤っている点等あれば指摘いただけると助かります．

ダメだったサンプル

gulp.task('browserify', function(){
    var browserify = require('browserify');
    browserify('<元になるファイル>', {<option>})
    .bundle()
    .pipe(gulp.dest('<出力先ディレクトリ>'));
});

このサンプルを実行すると，以下のようなエラーが発生した．

_stream_readable.js:540
    var ret = dest.write(chunk);
                   ^
TypeError: undefined is not a function

原因

browserifyのbundleの返り値が変更されてしまい，Writableではなくなったことが原因の模様．
詳細は関連のIssueを参照．

最終的に出来上がったgulpタスク

gulp.task('browserify', function(){
    var browserify = require('browserify');
    var through2 = require('through2');
    // browserifyしたいファイルを読み込む
    gulp.src('<元になるファイル>')
    // pipeしてthrough2オブジェクトを生成する
    .pipe(through2.obj(function(file, encode, callback){
        // fileにはsrcで読み込んだファイルの情報が引き渡される
        // file.pathを利用してbrowserifyインスタンスを生成する
        browserify(file.path, {<option>})
        .bundle(function(err, res){
            // bundleを実行し，処理結果でcontentsを上書きする
            file.contents = res;
            // callbackを実行し，次の処理にfileを引き渡す
            // nullになっている部分はエラー情報
            callback(null, file)
        });
    }))
    .pipe(gulp.dest('<出力先ディレクトリ>');
});

bundleの返り値を後続の処理で利用可能にするために，through2を利用する．

※ through2のAPIを理解しておくとgulpのpipeではまった時に助かりそう．

参考資料

この記事の元ネタ．bundleの仕様変更についても言及されている．
https://github.com/substack/node-browserify/issues/1198

gulpプラグイン作成についての記事．through2の使い方やgulpの挙動について．
http://qiita.com/morou/items/1297d5dd379ef013d46c

through2のAPI仕様
https://github.com/rvagg/through2