Gulpfile with Babel and ES6

gulpfile.babel.js

import gulp from 'gulp';
import { argv as args } from 'yargs';
import browserSync from 'browser-sync';
import del from 'del';
import path from 'path';
import assign from 'lodash.assign';
import configRaw from './gulp.config';
const config = configRaw();
import gulpPlugins from 'gulp-load-plugins';
const $ = gulpPlugins({lazy: true});
const port = process.env.PORT || config.defaultPort;

gulp.task('help', $.taskListing);
gulp.task('default', ['help']);

gulp.task('vet', () => {
    log('Analyzing source with JSHint and JSCS');
    return gulp
        .src(config.alljs)
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
        .pipe($.jshint.reporter('fail'));
});

gulp.task('styles', ['clean-styles'], () => {
    log ('Compliling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber())
        .pipe($.less())
        .pipe($.autoprefixer({browsers: ['last 2 versions', '> 5%']}))
        .pipe(gulp.dest(config.temp));
});

gulp.task('fonts', ['clean-fonts'], () => {
    log('Copying fonts');
    return gulp.src(config.fonts)
        .pipe($.plumber())
        .pipe(gulp.dest(`${config.build} fonts`));
});

gulp.task('images', ['clean-images'], () => {
    log('Copying and compressing the images');
    return gulp.src(config.images)
        .pipe($.imagemin({optimizationLevel: 4}))
        .pipe(gulp.dest(`${config.build}images`));
});

gulp.task('clean', (done) => {
    const delconfig = [].concat(config.build, config.temp);
    log(`Cleaning: ${$.util.colors.blue(delconfig)}`);
    del(delconfig, done);
});

gulp.task('clean-fonts', (done) => clean(`${config.build}fonts/**/*`, done));

gulp.task('clean-images', (done) => clean(`${config.build}images/**/*`, done));

gulp.task('clean-styles', (done) => clean(`${config.temp}**/*.css`, done));

gulp.task('clean-code', (done) => {
    const files = [].concat(
        `${config.temp}**/*.js`,
        `${config.build}**/*.html`,
        `${config.build}**/*.js`
    );
    clean(files, done);
});

gulp.task('less-watcher', () => gulp.watch([config.less], ['styles']));

gulp.task('wiredep', () => {
    log('Wire up the bower css js and our app js into the html');
    const options = config.getWiredepDefaultOptions();
    const wiredep = require('wiredep').stream;

    return gulp
        .src(config.index)
        .pipe($.plumber())
        .pipe(wiredep(options))
        .pipe($.inject(gulp.src(config.js)))
        .pipe(gulp.dest(config.client));
});

gulp.task('template-cache', ['clean-code'], () => {
    log('Creating AngularJS $templatecache');

    return gulp
        .src(config.htmltemplates)
        .pipe($.plumber())
        .pipe($.minifyHtml({empty: true}))
        .pipe($.angularTemplatecache(
            config.templateCache.file,
            config.templateCache.options
        ))
        .pipe(gulp.dest(config.temp));
});

gulp.task('inject', ['wiredep', 'styles', 'template-cache'], () => {
    log('Wire up the app css into the html and call wiredep');
    return gulp
        .src(config.index)
        .pipe($.plumber())
        .pipe($.inject(gulp.src(config.css)))
        .pipe(gulp.dest(config.client));
});

gulp.task('build', ['optimize', 'fonts', 'images'], () => {
    log('Building everything');

    const msg = {
        title: 'gulp build',
        subtitle: 'Deployed to the build folder',
        message: 'Running `gulp serve-build`'
    };
    del(config.temp);
    log(msg);
    notify(msg);
});

gulp.task('build-specs', ['template-cache'], () => {
    log('building the spec runner');

    const wiredep = require('wiredep').stream;
    const options = config.getWiredepDefaultOptions();
    let specs = config.specs;

    options.devDependencies = true;

    if (args.startServers) {
        specs = [].concat(specs, config.serverIntegrationSpecs);
    }

    return gulp
        .src(config.specRunner)
        .pipe(wiredep(options))
        .pipe($.inject(gulp.src(config.testLibraries), {name: 'inject:testlibraries', read: false}))
        .pipe($.inject(gulp.src(config.js)))
        .pipe($.inject(gulp.src(config.specHelpers), {name: 'inject:spechelpers', read: false}))
        .pipe($.inject(gulp.src(specs), {name: 'inject:specs', read: false}))
        .pipe($.inject(
            gulp.src(config.temp + config.templateCache.file),
            {name: 'inject:templates', read: false}))
        .pipe(gulp.dest(config.client));
});

gulp.task('optimize', ['inject', 'test'], () => {
    log('Optimizing the javascript, css, html');

    const assets = $.useref.assets({searchPath: './'});
    const cssFilter = $.filter('**/*.css');
    const jsAppFilter = $.filter(`**/${config.optimized.app}`);
    const jsLibFilter = $.filter(`**/${config.optimized.lib}`);
    const templateCache = config.temp + config.templateCache.file;
    return gulp
        .src(config.index)
        .pipe($.plumber())
        .pipe($.inject(
            gulp.src(templateCache, {read: false}),
            {starttag: '<!-- inject:templates:js -->'}
        ))
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(jsLibFilter)
        .pipe($.uglify())
        .pipe(jsLibFilter.restore())
        .pipe(jsAppFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify())
        .pipe(jsAppFilter.restore())
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.revReplace())
        .pipe(gulp.dest(config.build))
        .pipe($.rev.manifest())
        .pipe(gulp.dest(config.build));
});

gulp.task('bump', () => {
    let msg = 'Bumping versions';
    const type = args.type;
    const version = args.version;
    const options = {};
    if (version) {
        options.version = version;
        msg += ` to  ${version}`;
    }  else {
        options.type = type;
        msg += ` for a ${type}`;
    }
    log(msg);

    return gulp
        .src(config.packages)
        .pipe($.bump(options))
        .pipe(gulp.dest(config.root));
});

gulp.task('serve-build', ['build'], () => serve(false, false));

gulp.task('serve-dev', ['inject'], () => serve(true, false));

gulp.task('serve-specs', ['build-specs'], (done) => {
    log('Run the spec runner');
    serve(true, true);
    done();
});

gulp.task('test', ['vet', 'template-cache'], (done) => startTests(true, done));

gulp.task('auto-test', ['vet', 'template-cache'], (done) => startTests(false, done));

function serve(isDev, specRunner) {
    const nodeOptions = {
        script: config.nodeServer,
        delayTime: 1,
        env: {
            'PORT': port,
            'NODE_ENV': isDev ? 'dev' : 'build'
        },
        watch: [config.server]
    };
    return $.nodemon(nodeOptions)
        .on('restart', (env) => {
            log('*** nodemon restarted');
            log(`files changed on restart:\n${env}`);
            setTimeout(() => {
                browserSync.notify('reloading now...');
                browserSync.reload({stream: false});
            }, config.browserReloadDelay);
        })
        .on('start', () => {
            log('*** nodemon started');
            startBrowserSync(isDev, specRunner);
        })
        .on('crash', () => log('*** nodemon crashed: script crashed for some reason'))
        .on('exit', () => log('** nodemon exited cleanly'));
}

function clean(path, done) {
    log(`Cleaning: ${$.util.colors.blue(path)}`);
    del(path, done);
}

function log(msg) {
    if (typeof(msg) === 'object') {
        for (let item in msg) {
            if (msg.hasOwnProperty(item)) {
                $.util.log($.util.colors.blue(msg[item]));
            }
        }
    } else {
        $.util.log($.util.colors.blue(msg));
    }
}

function changeEvent(event) {
    const srcPattern = new RegExp(`/.*(?=/${config.source})/`);
    log(`File: ${event.path.replace(srcPattern, '')} ${event.type}`);
}

function startBrowserSync(isDev, specRunner) {
    if (args.nosync || browserSync.active) {
        return;
    }
    log(`Starting browser-sync on port ${port}`);

    if (isDev) {
        gulp.watch([config.less], ['styles'])
            .on('change', (event) => changeEvent(event));
    } else {
        gulp.watch([config.less, config.js, config.html], ['optimize', browserSync.reload])
            .on('change', (event) => changeEvent(event));
    }

    const options = {
        proxy: 'localhost:' + port,
        port: 3000,
        files: isDev ? [
            `${config.client}**/*.*`,
            `!${config.less}`,
            `${config.temp}**/*.css`
        ] : [],
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 1000
    };
    if (specRunner) {
        options.startPath = config.specRunner;
    }
    browserSync(options);
}

function startTests(singleRun, done) {
    let child;
    const fork = require('child_process').fork;
    const Server = require('karma').Server;
    let excludeFiles = [];
    const serverSpecs = config.serverIntegrationSpecs;

    if (args.startServers) {
        log('Starting server');
        let savedEnv = process.env;
        savedEnv.NODE_ENV = 'dev';
        savedEnv.port = 8888;
        child = fork(config.nodeServer);
    } else {
        if (serverSpecs && serverSpecs.length) {
            excludeFiles = serverSpecs;
        }
    }

    const server = new Server({
        configFile: `${__dirname}/karma.conf.js`,
        exclude: excludeFiles,
        singleRun: !!singleRun
    }, karmaCompleted);
    server.start();

    function karmaCompleted(karmaResult) {
        log('Karma completed');
        if (child) {
            log('Shutting down the child process');
            child.kill();
        }
        if (karmaResult === 1) {
            done(`karma: tests failed with code ${karmaResult}`);
        } else {
            done();
        }
    }
}

function notify(options) {
    const notifier = require('node-notifier');
    const notifyOptions = {
        sound: 'Bottle',
        contentImage: path.join(__dirname, 'gulp.png'),
        icon: path.join(__dirname, 'gulp.png')
    };
    assign(notifyOptions, options);
    notifier.notify(notifyOptions);
}