Gulpfile

gulpfile.babel.js

let production   = false;

// Module Requires
import path from 'path';
import gulp from 'gulp';
import gulpif from 'gulp-if';
import sourcemaps from 'gulp-sourcemaps';
import browserSync from 'browser-sync';
import imagemin from 'gulp-imagemin';
import sass from 'gulp-sass';
import del from 'del';
import runSequence from 'run-sequence';

const bs = browserSync.create();

// Gulp paths and options
const SERVER_DIR = './server';
const SRC_DIR    = './public/src';
const BUILD_DIR  = './public/dist';

const SRC_COMPONENTS = path.join(SRC_DIR, 'components');
const SRC_SASS       = path.join(SRC_DIR, 'sass');
const SRC_IMG        = path.join(SRC_DIR, 'img');
const SRC_FONTS      = path.join(SRC_DIR, 'font');

const BROWSERSYNC_OPTS = {
    proxy: 'localhost:8222',
    open: false,
    host: '0.0.0.0',
    port: 8223,
    reloadDebounce: 2000
};

// Clean up build directory
gulp.task('clean', () => {
    del.sync(BUILD_DIR);
});

// Sass compilation
gulp.task('styles', () => {
    return gulp.src(`${SRC_SASS}/global.scss`)
        .pipe(sourcemaps.init())
          .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.join(BUILD_DIR, 'css')))
        .pipe(gulpif(!production, bs.stream()));
});

// Move partials
gulp.task('partials', () => {
    return gulp.src(`${SRC_COMPONENTS}/**/*.html`)
        .pipe(gulp.dest(path.join(BUILD_DIR, 'partials')))
        .pipe(gulpif(!production, bs.stream()));
});

// Images
gulp.task('images', () => {
    return gulp.src(`${SRC_IMG}/**/*`)
        .pipe(gulpif(production, imagemin()))
        .pipe(gulp.dest(path.join(BUILD_DIR, 'img')))
        .pipe(gulpif(!production, bs.stream()));
});

// Fonts
gulp.task('fonts', () => {
    return gulp.src(`${SRC_FONTS}/*`)
        .pipe(gulp.dest(path.join(BUILD_DIR, 'font')))
        .pipe(gulpif(!production, bs.stream()));
});

// Browser-sync
gulp.task('browserSync', () => {
    bs.init(BROWSERSYNC_OPTS);
});

gulp.task('test', done => {
    karma.start({
        configFile: __dirname + '/karma.conf.js'
    }, done);
});

const sleep = ms => new Promise(r => setTimeout(r, ms));
// Watch function
gulp.task('watch', () => {
    gulp.watch(`${SRC_SASS}/**/*.scss`, ['styles']);
    gulp.watch(`${SRC_IMG}/*`, ['images']);
    gulp.watch(`${SRC_COMPONENTS}/**/*.*`).on('change', bs.reload);
    gulp.watch(`${SERVER_DIR}/**/*.*`).on('change', async () => {
        await sleep(3000);
        bs.reload();
    });
});

// Build task
gulp.task('build', cb => {
    runSequence(
        // clean build directory
        'clean',

        // run these in parallel
        [
            'styles',
            'images',
            'fonts'
        ],
        err => {
            if (err) { cb(err); }
            cb();
        }
    );
});

// Production build process
gulp.task('production', cb => {
    runSequence(
        'setProduction',
        'build',
        err => {
            if (err) { cb(err); }
            cb();
        }
    );
});

// Production flag
gulp.task('setProduction', () => {
    console.log('Building for production...');
    production = true;
});

// Default gulp task
gulp.task('default', ['build', 'watch', 'browserSync']);