EnotionZ
4/4/2016 - 2:00 AM

Gulpfile for browserify + babelify + watchify

Gulpfile for browserify + babelify + watchify

/**
  "devDependencies": {
    "babel-preset-es2015": "~6.6.0",
    "babel-preset-react": "~6.5.0",
    "babelify": "~7.2.0",
    "browserify": "~4.2.0",
    "gulp": "~3.9.0",
    "gulp-notify": "~1.4.0",
    "gulp-util": "~2.2.19",
    "react": "~0.14.8",
    "react-dom": "~0.14.8",
    "vinyl-source-stream": "~0.1.1",
    "watchify": "~0.10.2"
  }
*/

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var notify = require("gulp-notify");

var scriptsDir = './scripts';
var buildDir = './build';


function handleErrors() {
    var args = Array.prototype.slice.call(arguments);
    notify.onError({
        title: "Compile Error",
        message: "<%= error.message %>"
    }).apply(this, args);
    this.emit('end'); // Keep gulp from hanging on this task
}


function buildScript(file, watch) {
    var props = { entries: [scriptsDir + '/' + file], };
    var bundler = watch ? watchify(browserify(props)) : browserify(props);
    bundler.transform(babelify, {presets: ['es2015', 'react']});
    function rebundle() {
        var stream = bundler.bundle({debug: true});
        return stream.on('error', handleErrors)
        .pipe(source(file))
        .pipe(gulp.dest(buildDir + '/'));
    }
    bundler.on('update', function() {
        rebundle();
        gutil.log('Rebundle...');
    });
    return rebundle();
}


gulp.task('build', function() {
    return buildScript('main.js', false);
});


gulp.task('default', ['build'], function() {
    return buildScript('main.js', true);
});