ywt-web/gulpfile.babel.js

/**
 * React Static Boilerplate
 * Copyright (c) Konstantin Tarkus | MIT License
 */

import path from 'path';
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import run from 'run-sequence';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';

const $ = gulpLoadPlugins();

// Default Gulp task
gulp.task('default', ['serve']);

// Clean output directory
gulp.task('clean', () => del(['.tmp', 'build/*', '!build/.git'], {dot: true}));

// Bundling and optimization
gulp.task('bundle', cb => {
  const config = require('./webpack.config.js');
  const bundler = webpack(config);
  const bundle = (err, stats) => {
    if (err) {
      throw new $.util.PluginError('webpack', err);
    }
    console.log(stats.toString(config[0].stats));
    cb();
  };
  bundler.run(bundle);
});

// Generate web pages from React.js components
gulp.task('pages', () =>
  require('./build/pages.js')()
    .pipe(gulp.dest('build'))
);

// Compile everything to the `/build` folder
gulp.task('build', cb => run('clean', 'bundle', 'pages', cb));

// Launch development server with "hot reload"
gulp.task('serve', cb => {
  global.watch = true;
  const config = require('./webpack.config.js');
  const bundler = webpack(config);
  const server = new WebpackDevServer(bundler, {
    contentBase: path.join(__dirname, 'build'),
    hot: true,
    filename: '../app.js',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    stats: config[0].stats,
    historyApiFallback: true
  });
  server.listen(3000, 'localhost', () => {
    $.util.log('Server is running at ', $.util.colors.magenta('http://localhost:3000/'));
    cb();
  });
});