gulpfile.js

'use strict';

var gulp = require('gulp');
// var gutil = require('gulp-util');
var derequire = require('gulp-derequire');
var livereload = require('gulp-livereload');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var electron = require('electron-connect').server.create();

var paths = {
    styles: 'src/css/**/*.css',
    scripts: 'src/js/**/*.js'
};

// Build stylesheets
gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');
    var cssimport = require('postcss-import');
    var nested = require('postcss-nested');
    var customProperties = require('postcss-custom-properties');
    var colorHexAlpha = require('postcss-color-hex-alpha');
    var csswring = require('csswring');
    var reporter = require('postcss-reporter');

    var plugins = [
        cssimport,
        nested,
        customProperties(),
        colorHexAlpha(),
        autoprefixer({ browsers: ['last 2 versions', 'IE >= 11'] }),
        // preserveHacks is true because NOT preserving them doesn't mean
        // delete the hack, it means turn it into real CSS. Which is not
        // what we want!
        csswring({ removeAllComments: true, preserveHacks: true }),
        reporter()
    ];

    return gulp.src('./src/css/shaderNinja.css')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(postcss(plugins))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./build'))
        .pipe(livereload());
});

// Build Javascripts
gulp.task('js', function () {
    var browserify = require('browserify');
    var shim = require('browserify-shim');
    var babelify = require('babelify');
    var source = require('vinyl-source-stream');
    var buffer = require('vinyl-buffer');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');

    var bundle = browserify({
        entries: 'src/js/ShaderNinja.js',
        standalone: 'ShaderNinja',
        debug: true,
        transform: [
            babelify.configure({ optional: ['runtime'] }),
            shim
        ]
    });

    return bundle.bundle()
        .pipe(plumber())
        .pipe(source('shaderNinja.js'))
        .pipe(derequire())
        .pipe(buffer())
        // .pipe(sourcemaps.init({ loadMaps: true }))
            // Add transformation tasks to the pipeline here.
            // .on('error', gutil.log)
        // .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./build'))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest('./build'));
});

// Build ThreeCanvas
gulp.task('ThreeCanvas', function () {
    var browserify = require('browserify');
    var shim = require('browserify-shim');
    var babelify = require('babelify');
    var source = require('vinyl-source-stream');
    var buffer = require('vinyl-buffer');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');

    var bundle = browserify({
        entries: 'src/js/ThreeCanvas.js',
        standalone: 'ThreeCanvas',
        debug: true,
        transform: [
            babelify.configure({ optional: ['runtime'] }),
            shim
        ]
    });

    return bundle.bundle()
        .pipe(plumber())
        .pipe(source('ThreeCanvas.js'))
        .pipe(derequire())
        .pipe(buffer())
        .pipe(gulp.dest('./build'))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest('./build'));
});

// Rerun the task when a file changes
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(paths.styles, ['css']);
    gulp.watch(paths.scripts, ['js']);
});

gulp.task('run', function () {
    // Start browser process
    electron.start();
    // Reload browser process
    gulp.watch(['build/shaderNinja.css', 'build/shaderNinja.js','build/ThreeCanvas.js','src/index.html'], electron.reload);
    gulp.watch(['src/main.js'], electron.restart);
});

// Build files, do not watch
gulp.task('build', ['css', 'js', 'ThreeCanvas']);

gulp.task('electron', ['css', 'js', 'ThreeCanvas','watch', 'run']);

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['css', 'js','ThreeCanvas', 'watch']);