gulpfile.js

 // declarations, dependencies
// ----------------------------------------------------------------------------
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// External dependencies you do not want to rebundle while developing,
// but include in your application deployment
var dependencies = [
	'react',
  	'react-dom'
];
// keep a count of the times a task refires
var scriptsCount = 0;
 
// Gulp tasks
// ----------------------------------------------------------------------------
gulp.task('scripts', function () {
    bundleApp(false);
});
 
gulp.task('deploy', function (){
	bundleApp(true);
});
 
// gulp.task('watch', function () {
	// gulp.watch(['./app/*.js'], ['scripts']);
	// gulp.watch('./app/sass/*.scss', ['sass']);

// });

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
	});
	gulp.watch(['./app/js/*.js'], ['scripts']).on('change', browserSync.reload);
	gulp.watch(['./app/js/components/*.js'], ['scripts']).on('change', browserSync.reload);
	gulp.watch('./app/sass/*.scss', ['sass:watch']).on('change', browserSync.reload);
	gulp.watch("*.html").on('change', browserSync.reload);
});
 
gulp.task('sass', function () {
  return gulp.src('./app/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});


gulp.task('sass:watch', function () {
  gulp.watch('./app/sass/*.scss', ['sass']);
});

// When running 'gulp' on the terminal this task will fire.
// It will start watching for changes in every .js file.
// If there's a change, the task 'scripts' defined above will fire.
gulp.task('default', ['scripts','sass','browser-sync']);
 
// Private Functions
// ----------------------------------------------------------------------------
function bundleApp(isProduction) {
	scriptsCount++;
	// Browserify will bundle all our js files together in to one and will let
	// us use modules in the front end.
	var appBundler = browserify({
		entries: [
		'./app/js/app.js',
		'./app/js/components/main.js',
		'./app/js/components/home.js',
		'./app/js/components/login.js',
		'./app/js/components/about.js',
		'./app/js/components/contact.js',
		'./app/js/components/shop.js',
		'./app/js/components/products.js'
		],
    	debug: true
  	})
 
	// If it's not for production, a separate vendors.js file will be created
	// the first time gulp is run so that we don't have to rebundle things like
	// react everytime there's a change in the js file
  	if (!isProduction && scriptsCount === 1){
  		// create vendors.js for dev environment.
  		browserify({
			require: dependencies,
			debug: true
		})
			.bundle()
			.on('error', gutil.log)
			.pipe(source('vendors.js'))
			.pipe(gulp.dest('./js/'));
  	}
  	if (!isProduction){
  		// make the dependencies external so they dont get bundled by the 
		// app bundler. Dependencies are already bundled in vendor.js for
		// development environments.
  		dependencies.forEach(function(dep){
  			appBundler.external(dep);
  		})
  	}
 
  	appBundler
  		// transform ES6 and JSX to ES5 with babelify
	  	.transform("babelify", {presets: ["es2015", "react"]})
	    .bundle()
	    .on('error',gutil.log)
	    .pipe(source('bundle.js'))
	    .pipe(gulp.dest('./js/'));
}