browserify+react

gulp.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var gutil = require('gulp-util');

var watchify = require('watchify');
var errorify = require('errorify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var handlebars = require('browserify-handlebars');
var transform = require('vinyl-transform');
var exorcist = require('exorcist');

var cachedSrc = '';
var config = {
	appDir: 'apps',
	publicDir: './public/js',
	bundleFile: 'index.js',
	mapfile: 'index.js.map',
	isDevelopment: true
};

const entryPoint = './' + config.appDir + '/index.js';

var browserifyOptions = {
	cache: {},
	packageCache: {},
	fullPaths: false,
	debug: true,
	extensions: ['.json', '.js'],
	entries: entryPoint,
	paths: ['./' + config.appDir],
	plugin: [errorify]
};

var bundler = watchify(browserify(browserifyOptions));

var bundleJS = function() {
	return bundler.bundle()
		.on('error', notify.onError())
		.pipe(source(entryPoint))
		.pipe(transform(function() {
			return exorcist(config.publicDir + '/' + config.mapfile);
		}))
		.pipe(rename(config.bundleFile))
		.pipe(gulp.dest(config.publicDir))
		.pipe(livereload());
};

var startLivereload = function() {
	livereload.listen();
};

bundler.on('update', bundleJS);
bundler.on('log', gutil.log);

gulp.task('build-js', bundleJS);
gulp.task('livereload', startLivereload);

gulp.task('dev', ['livereload', 'build-js']);

package.json

{
	"browserify": {
		"transform": [
			"browserify-handlebars",
			"reactify", [
				"babelify", {
					"presets": [
						"react"
					]
				}
			]
		]
	},
	"dependencies": {
		"backbone.localstorage": "^1.1.16",
		"backbone.marionette": "^2.4.5",
		"underscore": "^1.8.3"
	},
	"devDependencies": {
		"babel-preset-react": "^6.5.0",
		"babelify": "^7.2.0",
		"backbone-react-component": "^0.10.0",
		"browserify": "^13.0.0",
		"browserify-handlebars": "^1.0.0",
		"chai": "^3.5.0",
		"errorify": "^0.3.1",
		"eslint": "^2.5.0",
		"exorcist": "^0.4.0",
		"glob": "^7.0.3",
		"gulp": "^3.9.1",
		"gulp-autoprefixer": "^3.1.0",
		"gulp-concat": "^2.6.0",
		"gulp-eslint": "^2.0.0",
		"gulp-livereload": "^3.8.1",
		"gulp-notify": "^2.2.0",
		"gulp-rename": "^1.2.2",
		"gulp-replace": "^0.5.4",
		"gulp-sass": "^2.2.0",
		"gulp-util": "^3.0.7",
		"handlebars": "^4.0.5",
		"json-server": "^0.8.9",
		"mochify": "^2.17.0",
		"mochify-browserify": "^2.14.4",
		"mochify-istanbul": "^2.4.1",
		"phantomjs": "^2.1.3",
		"react": "^15",
		"react-dom": "^15",
		"reactify": "^1.1.1",
		"require-dir": "^0.3.0",
		"sinon": "^1.17.3",
		"sinon-chai": "^2.8.0",
		"through": "^2.3.8",
		"uglifyify": "^3.0.1",
		"underscore": "^1.8.3",
		"vinyl-source-stream": "^1.1.0",
		"vinyl-transform": "^1.0.0",
		"watch": "^0.17.1",
		"watchify": "^3.7.0",
		"yargs": "^4.3.2"
	}
}