Gulpfile for doing watchify builds with the react transformer all hooked up to browser sync.

watchify-reactify-gulp.js

var gulp = require('gulp');
var util = require('gulp-util');
var watchify = require('watchify');
var reactify = require('reactify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

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

var notifier = require('node-notifier');

gulp.task('browser-sync', function () {
    browserSync({
        server: {
            baseDir: "./"
        }    
    })
});

gulp.task('watch', function () {
    var bundler = watchify(browserify('./src/app.js', watchify.args))
        .on('update', function () { util.log('Rebundling...'); })
        .on('time', function (time) {
            util.log('Rebundled in:', util.colors.cyan(time + 'ms'));
        });

    bundler.transform(reactify);
    bundler.on('update', rebundle);

    function rebundle() {
        return bundler.bundle()
            .on('error', function (err) {
                util.log(err);
                notifier.notify({ title: 'Browserify Error', message: 'Something went wrong :/' });
            })
            .pipe(source('dist.js'))
            .pipe(gulp.dest('./dist'))
            .pipe(browserSync.reload({ stream: true }));
    }

    return rebundle();
});

gulp.task('default', ['watch', 'browser-sync']);