Browserify＋gulpで、JavaScriptを個々のファイルとしてビルドする（**/*.js）

Browserifyで、JavaScriptファイルを個々にビルドしたいなと思いまして。

要するに、こちらのエントリのようなことがしたいと。

Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com

gulp + browserify, the gulp-y way – wehavefaces

gulp-recipes/browserify-vanilla at master · sogko/gulp-recipes · GitHub

しかしですね、このエントリを書いている時点（2016/3/7）で、この内容では動かないんですよ。

gulpfile.jsに同じようなことを書くと、こんな感じに怒られます。

_stream_readable.js:536
    var ret = dest.write(chunk);
                   ^

TypeError: dest.write is not a function
    at Producer.ondata (_stream_readable.js:536:20)
    at emitOne (events.js:90:13)
    at Producer.emit (events.js:182:7)
    at Producer.Readable.read (_stream_readable.js:368:10)
    at flow (_stream_readable.js:751:26)
    at resume_ (_stream_readable.js:731:3)
    at _combinedTickCallback (node.js:377:13)
    at process._tickCallback (node.js:401:11)

理由は、こちらのようです。

gulp recipe for browserify doesn't work · Issue #7 · hughsk/vinyl-transform · GitHub

exception: browserify + vinyl-transform · Issue #1198 · browserify/browserify · GitHub

bundleの戻り値の変更が原因だとか…。

で、どうするかですが、こちらのエントリを参考にthrough2を使えばなんとかなるようです。

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

こちらを参考に、Browserify＋gulpでJavaScriptファイルを個々にビルドしつつ、minify／sourcemap作成までのgulpfile.jsを書いてみます。

まずは、npmプロジェクトの作成とnpmモジュールのインストール。

$ npm init
$ npm install -g gulp
$ npm install --save-dev gulp browserify gulp-load-plugins gulp-uglify gulp-sourcemaps gulp-util through2 del

作成したgulpfile.js。
gulpfile.js

var gulp = require("gulp");
var $ = require("gulp-load-plugins")();
var browserify = require("browserify");
var through2 = require("through2");
var del = require("del");

gulp.task("clean", function() {
    del.sync(["dist/*"]);
});

gulp.task("build", function() {
    return gulp
        .src(["src/**/*.js"])
        .pipe(through2.obj(function(file, encode, callback) {
            browserify(file.path)
                .on("error", $.util.log)
                .bundle(function(err, res) {
                    if (err) {
                        $.util.log(err.message);
                        $.util.log(err.stack);
                    }
                    file.contents = res;
                    callback(null, file);
                });
        }))
        .pipe($.uglify())
        .pipe($.sourcemaps.init({loadMaps: true}))
        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/'));
});