Gulp workflow with Browserify, Babel, React & BrowserSync

bundle.js

// 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

// 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']);

serve.js

// tasks/serve.js

'use strict';

var browserSync = require('browser-sync');

module.exports = function () {
  browserSync({
    files: './app/src/bundle.js',
    server: {
      baseDir: ['./app', './']
    },
    notify: false
  });
};

watch.js

// tasks/watch.js

'use strict';

var gulp = require('gulp');

module.exports = function () {
  return gulp.watch([
    'app/src/**/*.js',
    '!app/src/bundle.js'
  ], ['bundle']);
};