-
-
Save janstuemmel/0077ec99bd7bc81260cde368c3628b90 to your computer and use it in GitHub Desktop.
gulpfile.js with browserify, reactify, watchify and gulp-notify.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": [ "es2015", "react" ] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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