Various gulp tasks for managing and bundling an angular 2 app

gulpfile.js

'use strict';

const gulp = require('gulp');
const $    = require('gulp-load-plugins')();
const _ = require('lodash');

const fs = require('fs-extra');
const runSequence = require('run-sequence');


gulp.task('ng-bundle', function(done) {
    runSequence('ng-build', 'ng-copy-node-modules', 'ng-bundle-dist', done);
});

/**
*   Bundling the angular app requires the custom node_modules being used in the app (e.g. angular2-cookie) to be available in the `dist` directory (for correct dev loading as well as determining the 'canonical name' for the packages.) This may be a result of my misconfiguration in the system-config, so it may be able to be removed in the future.
*/
gulp.task('ng-copy-node-modules', function(done) {

    let angularCustomModules = ['angular2-cookie', 'immutable'];

    fs.mkdirSync('./dist/node_modules');

    angularCustomModules.forEach(function(moduleName) {
        let moduleSrc = `./node_modules/${moduleName}`;
        let moduleDest = `./dist/node_modules/${moduleName}`;

        fs.copySync(moduleSrc, moduleDest);
        console.log(`Copied ${moduleSrc} to ${moduleDest}`);
    });

    done();
});

/**
*   Remove previous dist folder
*/
gulp.task('ng-empty-dist', function(done) {
    // careful with this; uses rm -fr
    // @todo move ./dist to ./dist.bak

    fs.emptyDir('./dist');

    console.log(`➡ Contents of the 'dist' have been removed.`);

    done();
});

gulp.task('ng-bundle-dist', function(done) {
    process.chdir('dist');

    let bundleFilename = 'app.bundle.js';

    const Builder = require('systemjs-builder');

    let builder = new Builder();

    builder.loadConfig('system-config.js')
    .then(function() {
        return builder
            .buildStatic('main.js', bundleFilename, {
                normalize: true,
                minify: true,
                mangle: true,
                runtime: false
            });
    })
    .then(function() {
        console.log(`➡ Bundle complete. \`stat ./dist/${bundleFilename}\``);
        done();
    })
    .catch(function (err) {
        console.log('error', err);
        console.log('ng-bundle failed.');
        process.exit(1);
    });
});

gulp.task('ng-build', ['ng-empty-dist'], function(done) {
    const childProcess = require('child-process-promise');

    childProcess.exec('ng build') // @todo eventually build --prod
        .then(function(result) {
            let stdout = result.stdout;
            let stderr = result.stderr;

            console.log('stdout: ', stdout);
            //console.log('stderr: ', stderr || 'empty');

            console.log('➡ Child process `ng init` completed. The ./dist folder should be populated.')

            done();
        })
        .catch(function (err) {
            console.error('ERROR: ', err);
            console.log('➡ `ng-init` failed.');
        });
});

// debounce the watch method so as not to allow copying of html files more than once every 10 seconds. attempt to fix occasional ide crashes.
const ngWatchDebounce = _.debounce(function(file) {
    let distFilePath = file.path.replace(/(\\|\/)src/, '$1dist');

    // index can be build so long as there is no angular prepreocssing template code (e.g. {#foreach scripts})
    /*if (file.path.match(/src(?:\\|\/)index\.html/)) {
        return console.log(`➡ Detected update to 'app/index.html'. Skipping.`);
    }*/

    fs.writeFile(distFilePath, file.contents.toString(), { encoding: 'utf8' }, function() {
        let d = +new Date();
        console.log(`[${d}] ➡ Updated file '${distFilePath}.`)
    });
}, 10 * 1000, { leading: true });

// Watches for changes to any html files in the frontend/src/* directory. Saved files are immediately copied to their corresponding path in frontend/dist/*
gulp.task('ng-watch', function(done) {
    const watch = require('gulp-watch');
    const plumber = require('gulp-plumber');

    watch('src/**/*.html', function(file) {
        ngWatchDebounce(file);
    });
});