gulpfile.js for developing applications in React with ES6

readme.md

There are three tasks in this setup. Each in its own file in folder named gulp-tasks.

Plugin Gulp-di is responsible for loading all gulp plugins (which start with gulp-) that can be found listed in package.json. We can also provide additional constants (objects, functions, values,...) with .provide.

Gulp-di also loads all tasks in gulp-tasks and to each it inject dependencies that are specified in function signature.

clean-public.js

module.exports = (gulp, del, paths) => {
    gulp.task('clean-public', () => {
        return del([ paths.jsPublicFiles, paths.jsSourceMaps ]);
    });
};

compile-js.js

module.exports = (gulp, watchify, browserify, source, buffer, gutil, sourcemaps, uglify, gif, paths) => {
    return gulp.task('compile-js', () => {
        var isProduction = process.env.NODE_ENV == 'production';
        var b = browserify({
            entries: [paths.jsEntry],
            debug: true,
            cache : {},
            packageCache : {},
            fullPaths: !isProduction
        });
        if (!isProduction) {
            b = watchify(b);
            b.on('update', bundle);
        }

        b.transform('babelify', { presets: ['es2015', 'react'] });
        b.on('log', gutil.log);

        function bundle() {
            return b.bundle()
                .on('error', gutil.log.bind(gutil, 'Browserify Error'))
                .pipe(source(paths.jsOutput))
                .pipe(buffer())
                .pipe(sourcemaps.init({loadMaps: true}))
                .pipe(gif(isProduction, uglify()))
                .pipe(sourcemaps.write('./'))
                .pipe(gulp.dest(paths.jsDest));
        }

        return bundle();
    });
};

gulpfile.js

'use strict';

const gulp = require('gulp');

const paths = {
    jsEntry: 'src/main.js',
    jsOutput: 'main.js',
    jsDest: 'public',
    jsPublicFiles: 'public/*.js',
    jsSourceMaps: 'public/**.js.map'
};

let di = require('gulp-di')(gulp, {
    rename: {
        'gulp-if': 'gulpIf',
    }})
    .tasks('./gulp-tasks')
    .provide('paths', paths)
    .provide('watchify', require('watchify'))
    .provide('browserify', require('browserify'))
    .provide('del', require('del'))
    .provide('source', require('vinyl-source-stream'))
    .provide('buffer', require('vinyl-buffer'))
    .provide('gif', require('gulp-if'))
    .resolve();

gulp.task('default', ['compile-js']);
gulp.task('build', ['clean-public', 'set-to-production', 'compile-js']);

set-to-production.js

module.exports = function(gulp) {
    gulp.task('set-to-production', function() {
        process.env.NODE_ENV = 'production';
    });
};