Skip to content

Instantly share code, notes, and snippets.

@janstuemmel
Forked from Sigmus/gulpfile.js
Last active February 26, 2018 17:19
Show Gist options
  • Save janstuemmel/0077ec99bd7bc81260cde368c3628b90 to your computer and use it in GitHub Desktop.
Save janstuemmel/0077ec99bd7bc81260cde368c3628b90 to your computer and use it in GitHub Desktop.
gulpfile.js with browserify, reactify, watchify and gulp-notify.
{
"presets": [ "es2015", "react" ]
}
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
}
// Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
function buildScript(file, watch) {
var props = {entries: [scriptsDir + '/' + file], debug: true, cache: {}, packageCache: {}};
var bundler = watch ? watchify(browserify(props)) : browserify(props);
bundler.transform(babelify);
function rebundle() {
var stream = bundler.bundle();
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment