gulpfile.js

var browserify = require('browserify');
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var reactify = require('reactify');
var runSequence = require('run-sequence');
var rename = require('gulp-rename');
var tap = require('gulp-tap');

var paths = {
  app_js: './src/js/app.js',
  build: './build/**',
  build_html: './build/**/*.html',
  build_images: './build/img/**',
  build_scripts: './build/js/**',
  build_styles: './build/css/**',
  images: './src/img/**/*',
  html: './src/html/**/*.html',
  scripts: './src/js/**/*.js*',
  styles: ['./src/css/**/*.less', './src/css/**/*.css']
};

var onError = function(err) {
  notify.onError({
    message: "Error: <%= error.message %>",
    subtitle: "Failure!",
    sound: "Beep",
    title: "Gulp"
  })(err);

  this.emit('end');
};

gulp.task('clean', function(done) {
  del([paths.build], done);
});

gulp.task('clean-scripts', function(done) {
  del([paths.build_scripts], done);
});

gulp.task('clean-styles', function(done) {
  del([paths.build_styles], done);
});

gulp.task('clean-html', function(done) {
  del([paths.build_html], done);
});

gulp.task('clean-images', function(done) {
  del([paths.build_images], done);
});

gulp.task('scripts', ['clean-scripts'], function() {
  return gulp.src(paths.app_js)
    .pipe(plumber({errorHandler: onError}))
    .pipe(tap(
      function (file) {
        file.contents = browserify({
          entries: [file.path],
          debug: true
        })
          .transform(reactify)
          .bundle();
      }
    ))
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('./build/js/'));
});

gulp.task('styles', ['clean-styles'], function() {
  return gulp.src(paths.styles)
    .pipe(plumber({errorHandler: onError}))
    .pipe(less())
    .pipe(gulp.dest('build/css'))
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('html', ['clean-html'], function() {
  gulp.src(paths.html)
    .pipe(gulp.dest('./build/'));
});

gulp.task('images', ['clean-images'], function() {
  gulp.src(paths.images)
    .pipe(gulp.dest('./build/img/'));
});

gulp.task('default', ['clean'], function() {
  gulp.start('scripts', 'styles', 'html', 'images');
});

gulp.task('serve', function(cb) {
  runSequence('default', function () {
    browserSync({
      browser: "Google Chrome",
      host: "127.0.0.1",
      injectChanges: false,
      notify: false,
      online: false,
      port: 8000,
      server: { baseDir: "./build/" }
    });

    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.html, ['html']);
    gulp.watch(paths.images, ['images']);

    cb();
  });
});