Gulp + React

gulpfile.js

/*
gulpfile.js
Directory structure
  ./dist [webapp compiled]
  ./src/ [webapp code]
  ./src/app [react code]
  ./src/assets [css and js files]
*/

var argv = require('yargs').argv;
var production = (process.env.NODE_ENV === 'production' || argv.production);

var gulp = require('gulp');
var watch = require('gulp-watch');
var sourcemaps = require("gulp-sourcemaps");
var minify = require('gulp-minify');
var streamify = require('gulp-streamify');
var concat = require('gulp-concat');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');
var notifier = require('node-notifier');
var webserver = require('gulp-webserver');

// livereload({ start: true })

gulp.task('webserver', function() {
  gulp.src('./dist')
    .pipe(webserver({
      livereload: true,
      directoryListing: false,
      open: true
    }));
});

gulp.task('app', function () {
  browserify({
    entries: 'src/app/index.jsx',
    extensions: ['.jsx'],
    debug: true
  })
  .transform(babelify.configure({
    optional: ["es7.asyncFunctions", "es7.decorators"]
  }))
  .bundle()
  .on('error', function (err) {
    console.log(err.toString());
    notify(err)
    this.emit("end");
  })
  .pipe(source('app.js'))
  .pipe(gulp.dest('dist/assets'))
  .pipe(livereload());
});

gulp.task('js', function() {
  return gulp.src([
    './bower_components/jquery/dist/jquery.js',
    './bower_components/bootstrap/dist/js/bootstrap.js',
    './src/assets/js/**/*.js'
  ])
  .pipe(concat('all.js'))
  .pipe(streamify(minify()))
  .pipe(gulp.dest("dist/assets"))
});

gulp.task('css', function() {
  return gulp.src([
    './src/assets/css/**/*.css'
  ])
  .pipe(concat('all.css'))
  .pipe(gulp.dest("dist/assets"))
});

gulp.task('img', function() {
  return gulp.src([
    './src/assets/images/**/*'
  ])
  .pipe(gulp.dest("dist/assets"))
});

gulp.task('index', function() {
  return gulp.src('./src/index.html')
    .pipe(gulp.dest("dist"))
})

// WATCHERS

gulp.task('watch-app', function() {
  watch('./src/app/**/*.jsx', function() {
      gulp.start('app');
  });
});

gulp.task('watch-js', function() {
  watch('./src/assets/js/*.js', function() {
      gulp.start('js');
  });
});

gulp.task('watch-css', function() {
  watch("./src/assets/css/*.css", function() {
      gulp.start('css');
  }).on('error', function(err) {
      console.log(err)
  });
});

gulp.task('watch-img', function() {
  watch("./src/assets/images/**/*", function() {
      gulp.start('img');
  }).on('error', function(err) {
      console.log(err)
  });
});

gulp.task('watch-index', function() {
  watch('./src/index.html', function() {
      gulp.start('index');
  });
});

gulp.task('watch', ['watch-app', 'watch-js', 'watch-css', 'watch-img', 'watch-index'])

gulp.task('default', ['app', 'js', 'css', 'img', 'index', 'watch', 'webserver']);


var notify = function(error) {
  var message = 'In: ';
  var title = 'Error: ';

  if(error.description) {
    title += error.description;
  } else if (error.message) {
    title += error.message;
  }

  if(error.filename) {
    var file = error.filename.split('/');
    message += file[file.length-1];
  }

  if(error.lineNumber) {
    message += '\nOn Line: ' + error.lineNumber;
  }

  notifier.notify({title: title, message: message});
};