Gulp と Browserify と Babelify と

個別にファイルを指定しなくても、一括ビルド出来るようにしたかったのですが、結構前にハマって試行錯誤していたので。

Gulp + Browserify + Babelify + React で ES6 を使うことを想定してます。

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    watch = require('gulp-watch'),
    babelify = require('babelify'),
    browserify = require('browserify'),
    through2 = require('through2');

// ES6
gulp.task('browserify', function() {
  var destPath = './public/js/';

  gulp.src('./src/es6/**/app.js')
    .pipe(plumber())
    .pipe(through2.obj(function(file, encode, callback) {
      browserify(file.path, {
        debug: false
      }).transform(babelify, {
        presets: ['es2015', 'react']
      }).bundle(function(err, res) {
        if (err) { return callback(err); }
        file.contents = res;
        callback(null, file);
      }).on("error", function (err) {
        console.log("Error : " + err.message);
      });
    }))
    .pipe(gulp.dest(destPath));
});

// Watch
gulp.task('watch', function() {
  watch('./src/es6/**/*.js', function() {
    gulp.start('browserify');
  });
});

// Run
gulp.task('default', ['watch']);

これでエラーが出てもエラー箇所が分かって Gulp も停止しなくなったー。