React Gulpfile

gulpfile.js

'use strict';

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    path = require('path'),
    vinylPaths = require('vinyl-paths'),
    del = require('del'),

    express = require('express'),
    tinyLr = require('tiny-lr'),

    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    rev = require('gulp-rev'),
    sassConfig = { includePaths: ['src/styles'] },

    webpack = require('webpack'),
    webpackConfig = require('./webpack.config.js'),

    httpPort = 4000,
    liveReloadPort = 35729;

if (gulp.env.production) {
    webpackConfig.plugins = webpackConfig.plugins.concat(new webpack.optimize.UglifyJsPlugin());
    webpackConfig.output.filename = 'main-[hash].js';
}

gulp.task('clean', function() {
    gulp.src('dist', { read: false })
        .pipe(vinylPaths(del));
});

gulp.task('webpack', function(callback) {
    execWebpack(webpackConfig);
    callback();
});

gulp.task('sass', function() {
    gulp.src('src/styles/main.scss')
        .pipe(sass(sassConfig).on('error', gutil.log))
        .pipe(gulp.env.production ? minifyCSS() : gutil.noop())
        .pipe(gulp.env.production ? rev() : gutil.noop())
        .pipe(gulp.dest('dist/assets'));
});

gulp.task('copy', function() {
    gulp.src(['src/**/*', '!src/scripts/**/*', '!src/styles', '!src/styles/**/*'])
        .pipe(gulp.dest('dist'));
});


gulp.task('build', ['webpack', 'sass', 'copy']);

gulp.task('dev', ['build'], function() {
    var servers = createServers(httpPort, liveReloadPort);
    gulp.watch(['./src/**/*'], function() {
        gulp.run('build');
    });
    gulp.watch(['./dist/**/*'], function(event) {
        gutil.log(gutil.colors.cyan(event.path), 'changed');
        servers.lr.changed({ body: { files: [event.path] }});
    });
});

gulp.task('default', ['build'], function() {
    setTimeout(function() {
        gutil.log('');
        gutil.log('');
        gutil.log('**********************************************');
        gutil.log('*', 'gulp', gutil.colors.yellow('              (development build)'));
        gutil.log('*', 'gulp', gutil.colors.bold.green('clean'), gutil.colors.yellow('        (rm /dist)'));
        gutil.log('*', 'gulp', gutil.colors.bold.green('--production'), gutil.colors.yellow(' (production build)'));
        gutil.log('*', 'gulp', gutil.colors.bold.green('dev'), gutil.colors.yellow('          (build and run dev server)'));
        gutil.log('**********************************************');
    }, 500);
});

function createServers(expressPort, lrPort) {
    var lr  = tinyLr(),
        app = express();

    lr.listen(lrPort, function() {
        gutil.log('LiveReload listening on', lrPort);
    });

    app.use(express.static(path.resolve('./dist')));
    app.listen(expressPort, function() {
        gutil.log('HTTP server listening on', expressPort);
    });

    return {
        lr: lr,
        app: app
    };
}

function execWebpack(config) {
    webpack(config, function(error, stats) {
        if (error) {
            throw new gutil.PluginError('execWebpack', error);
        }
        gutil.log('[execWebpack]', stats.toString({colors: true}));
    });
}