gulpfile.js

var gulp = require('gulp');
var path = require('path');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var watchify = require('watchify');
var util = require('gulp-util')
var less = require('gulp-less');
var clean = require('gulp-clean');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var webpack = require("webpack");
var modRewrite = require('connect-modrewrite');


var webpackConfig = require("./webpack.config.js");

var dist = './build';
var src = './src';
var libs = ['react', 'jquery', 'backbone', 'es6-promise', 'superagent', 'events'];


gulp.task('clean', function() {
    return gulp.src('build', {
        read: false
    }).pipe(clean());
});

// gulp.task('less', function () {
//   gulp.src('./src/less/styles.less')
//     .pipe(plumber())
//     .pipe(less({
//       paths: [path.join(__dirname, 'less', 'includes')]
//     }))
//     .pipe(gulp.dest('./build/assets'))
//     .pipe(browserSync.reload({
//       stream: true
//     }));
// });

gulp.task('browser-sync', function () {
  browserSync.init([src + '/index.html'], {
    notify: true,
    ghostMode: false,
    open: false,
    server: {
      baseDir: dist,
      middleware: [
        modRewrite(['!\.html|\.woff|\.js|\.ttf|\.svg|\.css|\.png$ /index.html [L]'])
      ]
      // middleware: [modRewrite ['!\.html|\.js|\.css|\.png$ /index.html [L]']]
    }
  });
});

gulp.task('copy', function () {
 // Copy html
 gulp.src(src + '/index.html')
   .pipe(gulp.dest(dist));
gulp.src(src + '/img/*.*')
   .pipe(gulp.dest(dist + '/assets/img'));
gulp.src(src + '/bower/fontawesome/fonts/*.*')
  .pipe(gulp.dest(dist + '/assets/fonts'));
   //     gulp.src(src + '/bower/**/*')
   // .pipe(gulp.dest(dist + '/bower'));

});
// gulp.task('libs', function () {
//   return browserify()
//     .require(libs)
//     .bundle()
//     .on('error', util.log)
//     .pipe(source('libs.js'))
//     .pipe(gulp.dest('./dist'));
// });
// gulp.task('browserify-watch', function() {
//     var bundler = watchify('./src/js/GoGradeApp.jsx')

//     bundler.transform(reactify)
//     bundler.on('update', rebundle)

//   function rebundle () {
//     return bundler
//       .external(libs)
//       .bundle({debug: true})
//       .on('error', util.log)
//       .pipe(source('bundle.js'))
//       .pipe(gulp.dest('./dist'))
//       .pipe(browserSync.reload({
//         stream: true
//     }));
//   }
//   return rebundle();
// });
gulp.task('webpack', function(callback) {
    execWebpack(webpackConfig);
    return callback();
});
var execWebpack = function(config) {
    return webpack(config, function(err, stats) {
        if (err) {
            throw new util.PluginError("execWebpack", err);
        }
        return util.log("[execWebpack]", stats.toString({
            colors: true
        }));
    });
};


gulp.task('watch', function () {
  gulp.watch('src/index.html', ['copy'])
  // gulp.watch('src/less/*.less', ['less']);
  gulp.watch(src + '/js/**/*.*');

  gulp.watch('./build/**/*.*', function(){
    browserSync.reload();
  });
});

gulp.task('build', function(){
  gulp.start('webpack', 'copy');
})

// Default Task
gulp.task('default', ['build'], function () {
  gulp.start('watch','browser-sync');
});

webpack.config.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
  entry: {
    app: './src/scripts/app.js'
  },
  target: 'web',
  watch: true,
  debug: true,
  output: {
    path: path.join(__dirname, 'build', 'assets'),
    publicPath: '/assets/',
    fileName: 'main.js',
    chunkFilename: "[hash]/js/[id].js",
  },
  // resolve: {
  //       // Tell webpack to look for required files in bower and node
  //       modulesDirectories: ['bower', '../node_modules'],
  // },
  module: {
    loaders: [
      { test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM&harmony=true" },
      { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
      { test: /\.gif/, loader: "url-loader?limit=10000&minetype=image/gif" },
      { test: /\.jpg/, loader: "url-loader?limit=10000&minetype=image/jpg" },
      { test: /\.png/, loader: "url-loader?limit=10000&minetype=image/png" },
      { test: /\.js$/, loader: "jsx-loader?harmony=true" },
      { test: /\.woff$/,   loader: "url-loader?prefix=font/&limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/,    loader: "file-loader?prefix=font/" },
      { test: /\.eot$/,    loader: "file-loader?prefix=font/" },
      { test: /\.svg$/,    loader: "file-loader?prefix=font/" }
    ],
    noParse: /\.min\.js/
  },
  // plugins: [
    //   new webpack.DefinePlugin({
    //   "process.env": {
    //     "NODE_ENV": JSON.stringify("production")
    //   }
    // }),
    // new webpack.optimize.DedupePlugin()
    // new webpack.optimize.UglifyJsPlugin()
  // ]
};


// var path = require("path");
// var webpack = require("webpack");
// module.exports = {
//   entry: {
//     app: './src/js/GoGradeApp.jsx'
//   },
//   output: {
//     path: path.join(__dirname, 'build'),
//     publicPath: 'build/',
//     fileName: '[name].js',
//     chunkFilename: '[chunkhash].js'
//   },
//   // resolve: {
//   //       // Tell webpack to look for required files in bower and node
//   //       modulesDirectories: ['bower', '../node_modules'],
//   // },
//   module: {
//     loaders: [
//       { test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM" },
//       { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
//       { test: /\.gif/, loader: "url-loader?limit=10000&minetype=image/gif" },
//       { test: /\.jpg/, loader: "url-loader?limit=10000&minetype=image/jpg" },
//       { test: /\.png/, loader: "url-loader?limit=10000&minetype=image/png" },
//       { test: /\.js$/, loader: "jsx-loader" },
//       { test: /\.woff$/,   loader: "url-loader?prefix=font/&limit=10000&mimetype=application/font-woff" },
//       { test: /\.ttf$/,    loader: "file-loader?prefix=font/" },
//       { test: /\.eot$/,    loader: "file-loader?prefix=font/" },
//       { test: /\.svg$/,    loader: "file-loader?prefix=font/" }
//     ]
//   },
//   console: true,
//   cache: true
// };