16
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
16
Help us understand the problem. What are the problem?