gulpfile.js

// ========================================================================== //
//  CONSTANTS
// ========================================================================== //

// Dependencies
const { src, dest, lastRun, watch, series } = require('gulp');
const autoprefixer         = require('gulp-autoprefixer');
const browserSync          = require('browser-sync').create();
const cacheBust            = require('gulp-cache-bust');
const cleanCss             = require('gulp-clean-css');
const del                  = require('del');
const directorySync        = require('gulp-directory-sync');
const fileInclude          = require('gulp-file-include');
const flatten              = require('gulp-flatten');
const groupCssMediaQueries = require('gulp-group-css-media-queries');
const header               = require('gulp-header');
const imagemin             = require('gulp-imagemin');
const notify               = require('gulp-notify');
const path                 = require('path');
const pkg                  = require('./package.json');
const plumber              = require('gulp-plumber');
const rename               = require('gulp-rename');
const sass                 = require('gulp-sass')(require('sass'));
const shell                = require('gulp-shell');
const sourcemaps           = require('gulp-sourcemaps');
const stripCssComments     = require('gulp-strip-css-comments');
const uglifyEs             = require('gulp-uglify-es');


// ========================================================================== //
//  BANNER
// ========================================================================== //

const banner = [
    '/* ================================================================================ */\n' +
    '/*  Project: <%= package.title %>\n' +
    '/*  Author: <%= package.author.name %>\n' +
    '/*  Date: ' + new Date() + '\n' +
    '/*  \n' +
    '/*  Copyright © ' + new Date().getFullYear() + ' <%= package.author.company %>\n' +
    '/*  <%= package.author.url %>\n' +
    '/* ================================================================================ */\n\n'
].join('\n');


// ========================================================================== //
//  HTML
// ========================================================================== //

// ========================================================================== //
//  This task compiles source HTML files, places the files in the
//  destination path, and reloads the page.
// ========================================================================== //

function html() {
    return src([
        pkg.paths.src.root + '**/*.html',
        '!' + pkg.paths.src.root + 'partials/**/*.html',
        '!' + pkg.paths.src.root + 'shared/*.html'
    ])
        .pipe(fileInclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(cacheBust({
            type: 'timestamp'
        }))
        .pipe(dest([
            pkg.paths.docs.root
        ]))
        .pipe(browserSync.stream());
}


// ========================================================================== //
//  CSS
// ========================================================================== //

// ========================================================================== //
//  This task compiles source SCSS files, strips comments, adds vendor prefixes, combines
//  media queries, minifies, appends ".min" to the filenames before the extension, places
//  the files in the destination path, and reloads the page. If an error occurs, the
//  "plumber" pipe prevents the stream from breaking and displays the error via popup.
// ========================================================================== //

function css() {
    return src([
        pkg.paths.src.scss + '**/*.scss'
    ])
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        // .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(stripCssComments({
            preserve: false
        }))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(groupCssMediaQueries())
        // .pipe(sourcemaps.write('./'))
        .pipe(flatten({
            includeParents: 0
        }))
        .pipe(cleanCss({
            level: {
                2: {
                    restructureRules: true
                }
            }
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(header(banner, {
            package: pkg
        }))
        .pipe(dest([
            pkg.paths.docs.css
        ]))
        .pipe(browserSync.stream());
}


// ========================================================================== //
//  IMAGES
// ========================================================================== //

// ========================================================================== //
//  This task optimizes source image files, and places the files in the destination path.
// ========================================================================== //

function images() {
    return src([
        pkg.paths.src.img + '**/*'
    ], {
        since: lastRun(images)
    })
        .pipe(directorySync(pkg.paths.src.img, pkg.paths.docs.img))
        .pipe(imagemin([
            imagemin.gifsicle({
                interlaced: true,
                optimizationLevel: 3
            }),
            imagemin.mozjpeg({
                progressive: true
            }),
            imagemin.optipng({
            }),
            // imagemin.svgo({
            //     plugins: [
            //         // { addAttributesToSVGElement: true },
            //         // { addClassesToSVGElement: true },
            //         { cleanupAttrs: true },
            //         { cleanupEnableBackground: true },
            //         { cleanupIDs: true },
            //         { cleanupListOfValues: true },
            //         { cleanupNumericValues: true },
            //         { collapseGroups: true },
            //         { convertColors: true },
            //         // { convertEllipseToCircle: true },
            //         { convertPathData: true },
            //         // { convertShapeToPath: true },
            //         { convertStyleToAttrs: true },
            //         { convertTransform: true },
            //         { inlineStyles: true },
            //         { mergePaths: true },
            //         // { minifyStyles: true },
            //         // { moveElemsAttrsToGroup: true },
            //         // { moveGroupAttrsToElems: true },
            //         // { prefixIDs: true },
            //         // { removeAttributesBySelector: true },
            //         // { removeAttrs: true },
            //         { removeComments: true },
            //         { removeDesc: true },
            //         // { removeDimensions: true },
            //         { removeDoctype: true },
            //         { removeEditorsNSData: true },
            //         // { removeElementsByAttr: true },
            //         { removeEmptyAttrs: true },
            //         { removeEmptyContainers: true },
            //         { removeEmptyText: true },
            //         { removeHiddenElems: true },
            //         { removeMetadata: true },
            //         { removeNonInheritableGroupAttrs: true },
            //         // { removeOffCanvasPaths: true },
            //         { removeRasterImages: true },
            //         { removeScriptElement: true },
            //         { removeStyleElement: true },
            //         { removeTitle: true },
            //         { removeUnknownsAndDefaults: true },
            //         { removeUnusedNS: true },
            //         { removeUselessDefs: true },
            //         { removeUselessStrokeAndFill: true },
            //         { removeViewBox: true },
            //         // { removeXMLNS: true },
            //         { removeXMLProcInst: true },
            //         // { reusePaths: true },
            //         { sortAttrs: true },
            //         // { sortDefsChildren: true }
            //     ]
            // })
        ], {
            verbose: true
        }))
        .pipe(dest([
            pkg.paths.docs.img
        ]))
        .pipe(browserSync.stream());
}


// ========================================================================== //
//  JS
// ========================================================================== //

// ========================================================================== //
//  This task strips console, alert, and debugger statements from source JS files, minifies,
//  appends ".min" to the filenames before the extension, places the files in the
//  destination path, and reloads the page. If an error occurs, the "plumber" pipe prevents
//  the stream from breaking and displays the error via popup.
// ========================================================================== //

function js() {
    return src([
        pkg.paths.src.js + '**/*.js'
    ], {
        since: lastRun(js)
    })
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(flatten({
            includeParents: 0
        }))
        // .pipe(stripDebug())
        .pipe(uglifyEs.default())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(header(banner, {
            package: pkg
        }))
        .pipe(dest([
            pkg.paths.docs.js
        ]))
        .pipe(browserSync.stream());
}


// ========================================================================== //
//  SERVE
// ========================================================================== //

// ========================================================================== //
//  This task launches a local Browsersync server in a browser, watches for file changes,
//  and runs the respective task when changes are detected.
// ========================================================================== //

function serve() {

    // Browsersync
    browserSync.init({
        notify: false,
        server: pkg.paths.docs.root
    });

    // HTML
    watch([
        pkg.paths.src.root + '**/*.html'
    ], series(html))
        .on('add', series(html))
        .on('unlink', (filepath) => {
            const srcPath = path.relative(path.resolve(pkg.paths.src.root), filepath);
            const destPath = path.resolve(pkg.paths.docs.root, srcPath);

            del.sync(destPath);
        });

    // CSS
    watch([
        pkg.paths.src.scss + '**/*.scss'
    ], series(css));

    // Images
    watch([
        pkg.paths.src.img + '**/*'
    ], series(images));

    // JS
    watch([
        pkg.paths.src.js + '**/*.js'
    ], series(js));
}


// ========================================================================== //
//  DEFAULT
// ========================================================================== //

// ========================================================================== //
//  This task sequentially runs a series of tasks for local development, launches a local
//  server, watches for file changes, and reloads the page when changes are detected.
// ========================================================================== //

exports.default = series(
    html,
    css,
    images,
    js,
    serve
);


// ========================================================================== //
//  BUILD
// ========================================================================== //

// ========================================================================== //
//  This task sequentially runs a series of tasks, without launching a local server or
//  watching for file changes.
// ========================================================================== //

exports.build = series(
    html,
    css,
    images,
    js,
);