gulpfile.js

'use strict';

const {
    dest,
    parallel,
    series,
    src,
    watch,
} = require('gulp');
const cleanCSS          = require('gulp-clean-css');
const gulpif            = require('gulp-if');
const sass              = require('gulp-sass');
const sourcemaps        = require('gulp-sourcemaps');
const autoprefixer      = require('gulp-autoprefixer');
const sassGlob          = require('gulp-sass-glob');
const stylelint         = require('gulp-stylelint');
const uglify            = require('gulp-uglify');
const browserify        = require('browserify');
const watchify          = require('watchify');
const babel             = require('babelify');
const source            = require('vinyl-source-stream');
const buffer            = require('vinyl-buffer');
const del               = require('del');

//
// JS
//
function compileJs() {
    return bundleJs();
}

function cleanJs() {
    return del(['./dist/js']);
}

const js = series(cleanJs, compileJs);

exports.js = js;

//
// CSS
//
function createCssSkins(cb) {
    const fs = require('fs');
    const skins = require('./assets/scss/skins/_skins.json');

    for (let skin of skins) {
        fs.writeFileSync(`./assets/scss/skins/${skin.name}.scss`,
`
$color-header-background: ${skin.accent};
$color-header-content: ${skin.complement};
$color-link: ${skin.links};

@import "../theme";
@import "../core/all";
@import "../components/**/*.scss";
`);
    }

    cb();
}

function bundleCss(watch) {
    return src('./assets/scss/skins/*.scss')
        .pipe(stylelint({
            reporters: [{formatter: 'string', console: true}]
        }))
        .pipe(sassGlob())
        .pipe(sass({
            includePaths: 'node_modules'
        }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(gulpif(!watch, cleanCSS()))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

function compileAndMinifyCss() {
    return bundleCss();
}

function compileCss() {
    return bundleCss(true);
}

const css = series(createCssSkins, compileAndMinifyCss);

exports.css = css;

//
// Fonts
//
function copyFonts() {
    return src('./assets/fonts/**/*')
        .pipe(dest('./dist/fonts'));
}

function cleanFonts() {
    return del(['./dist/fonts']);
}

const fonts = series(cleanFonts, copyFonts);

exports.fonts = fonts;

//
// Images
//
function copyImg() {
    return src('./assets/img/**/*')
        .pipe(dest('./dist/img'));
}

function copyFavicon() {
    return src('./assets/favicon.ico')
        .pipe(dest('./dist'));
}

function cleanImg() {
    return del(['./dist/img']);
}

const img = series(cleanImg, parallel(copyImg, copyFavicon));

exports.img = img;

//
// Task sets
//
function watchFiles() {
    watch('./assets/scss/**/*.scss', compileCss);
    bundleJs(true);
    watch('./assets/img/**/*', img);
    watch('./assets/fonts/**/*', fonts);
}

const compile = series(css, js, img, fonts);

exports.watch = series(compile, watchFiles);

exports.default = compile;

//
// Utils
//
function bundleJs(watch) {

    let bundler = browserify('./assets/js/mandelbrot.js', {
        debug: true
    }).transform(babel, {
        presets: ["es2015"]
    });

    if (watch) {
        bundler = watchify(bundler);
        bundler.on('update', function () {
            console.log('Rebundling JS....');
            rebundle();
        });
    }

    function rebundle() {
        let bundle = bundler.bundle()
            .on('error', function (err) {
                console.error(err.message);
                // this.emit('end');
            })
            .pipe(source('mandelbrot.js'))
            .pipe(buffer());

        if (!watch) {
            bundle.pipe(uglify());
        }

        bundle.pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('./'))
            .pipe(dest('./dist/js'));

        return bundle;
    }

    return rebundle();
}