watchify-browserify-gulp-recipe.js

var gulp = require('gulp');
var through = require('through2');
var gutil = require('gulp-util');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var exhaustively = require('stream-exhaust');
var objectAssign = require('object-assign');

var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var watchify = require('watchify');


// Inspired by: https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
var bundleScripts = (function() {
	var browserifyOpts = objectAssign({}, watchify.args, {
		entries: config.paths.js.src,
		debug: true
	});

	var ifyInstance = watchify(browserify(browserifyOpts));
	ifyInstance.transform(babelify);

	var isFirstBundleRun = true;

	var defaults = {
		watch: false
	};
	return function getBundler(options) {
		var opts = objectAssign({}, defaults, options);

		var browserifyBundle = function() {
			console.log('bundling');
			var flowingStream = ifyInstance.bundle()
				// log errors if they happen
				.on('error', gutil.log.bind(gutil, 'Browserify Error'))
				.pipe(source('bundle.js'))
				// optional, remove if you don't need to buffer file contents
				.pipe(buffer())
				// optional, remove if you dont want sourcemaps
				.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
				// Add transformation tasks to the pipeline here.
				.pipe(sourcemaps.write('./')) // writes .map file
				.pipe(gulp.dest(config.paths.js.dist));

			isFirstBundleRun = false;
			return flowingStream;
		};

		// > Important: Watchify will not emit 'update' events until
		// > you've called w.bundle() once and completely drained the stream it returns.
		// > https://github.com/substack/watchify#watchifyb-opts
		if(isFirstBundleRun && opts.watch) {
			console.log('bundling for watch');
			exhaustively(browserifyBundle());
		}

		if(opts.watch) {
			console.log('watching');
			ifyInstance.on('update', browserifyBundle);
			ifyInstance.on('log', gutil.log);
		}

		return browserifyBundle;
	};
})();

// So you can still run the build script standalone
gulp.task('build-scripts-browserify', bundleScripts({
	watch: false
}));



// Rerun tasks when a file changes
gulp.task('watch', function() {
	// Start watching scripts
	var bundler = bundleScripts({
		watch: true
	});
});


// Build Task
gulp.task(
	'build',
	gulp.parallel(
		'build-scripts-browserify'
	)
);

// Default Task
gulp.task('default',
	gulp.series(
		'build',
		'watch'
	)
);