Skip to content

Instantly share code, notes, and snippets.

@thomastuts
Created April 1, 2015 18:10
Show Gist options
  • Save thomastuts/f3b198d60625d73996c2 to your computer and use it in GitHub Desktop.
Save thomastuts/f3b198d60625d73996c2 to your computer and use it in GitHub Desktop.
Gulp workflow with Browserify, Babel, React & BrowserSync
// tasks/bundle.js
'use strict';
var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var concat = require('gulp-concat');
var gutil = require('gulp-util');
var bundler = watchify(browserify('./app/src/app.js', watchify.args));
bundler.transform('reactify');
bundler.transform('babelify');
bundler.on('update', bundle); // on any dep update, runs the bundler
function bundle() {
return bundler.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you dont want sourcemaps
.pipe(buffer())
//
.pipe(gulp.dest('./app/src'));
}
module.exports = bundle;
// gulpfile.js
'use strict';
var gulp = require('gulp');
gulp.task('serve', ['bundle', 'watch'], require('./tasks/serve'));
gulp.task('watch', require('./tasks/watch'));
gulp.task('bundle', require('./tasks/bundle'));
gulp.task('default', ['serve']);
// tasks/serve.js
'use strict';
var browserSync = require('browser-sync');
module.exports = function () {
browserSync({
files: './app/src/bundle.js',
server: {
baseDir: ['./app', './']
},
notify: false
});
};
// tasks/watch.js
'use strict';
var gulp = require('gulp');
module.exports = function () {
return gulp.watch([
'app/src/**/*.js',
'!app/src/bundle.js'
], ['bundle']);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment