Gulpfile for React.js include Watchify + Babelify + Browser-sync

gulpfile.js

'use strict';
// gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

var browserify = require('browserify');
var watchify = require('watchify');
var babelify = require('babelify');

var browserSync = require('browser-sync');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

var reload = browserSync.reload;

var opts = {
    appJs: './index.js',
    appFolder: './',
    jsOutfile: 'bundle.js',
    jsOutFolder: './build'
};

gulp.task('browserify', function() {

    var bundler = watchify(browserify(opts.appJs, { debug: true }).transform(babelify));

    function rebundle(){
        return bundler.bundle()
            .on('error', function(err) { console.error(err); this.emit('end'); })
            .pipe(source(opts.jsOutfile))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(opts.jsOutFolder))
            .pipe(reload({stream:true}));
    }

    bundler.on('update', function() {
        console.log('-> bundling...');
        rebundle();
    });

    rebundle();
});

gulp.task('browser-sync', function() {
    browserSync({
        notify: true,
        port: 3001,
        server: {
            baseDir: opts.appFolder
        }
    });

});

gulp.task('default', ['browser-sync', 'browserify'], function() {

    gulp.watch('./*.html', function (event) {
        browserSync.reload(event.path);
    });
});