Boilerplate for assets compilation in new projects

.editorconfig

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

README.md

Assets Boilerplate

To install all Gulp dependencies simply run command:

$ yarn add gulp gulp-concat gulp-css-url-adjuster gulp-csso gulp-rename gulp-sass gulp-sass-lint gulp-sourcemaps gulp-tap gulp-uglify sass-lint --dev

Create structure:

• assets/
• assets/images/
• assets/js/
• assets/scss/

Create files:

• assets/js/template.js
• assets/scss/template.scss

gulpfile.js

const fs = require("fs");
const path = require("path");
const gulp = require("gulp");
const sassPlugin = require("gulp-sass");
const sassLintPlugin = require("gulp-sass-lint");
const sourceMapPlugin = require("gulp-sourcemaps");
const concatPlugin = require("gulp-concat");
const uglifyPlugin = require("gulp-uglify");
const cssoPlugin = require("gulp-csso");
const renamePlugin = require("gulp-rename");
const adjusterPlugin = require("gulp-css-url-adjuster");
const tapPlugin = require("gulp-tap");

/**
 * Lint SCSS files.
 *
 * @return {Promise}
 */
function lintSass() {
    return new Promise((resolve, reject) => {
        source("/scss/**/*.scss").then(sourceDirectory => {
            gulp.src(sourceDirectory)
                .pipe(sassLintPlugin())
                .pipe(sassLintPlugin.format())
                .pipe(sassLintPlugin.failOnError());

            resolve();
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Compile SCSS styles into CSS.
 *
 * @return {Promise}
 */
function compileSass() {
    return new Promise((resolve, reject) => {
        readConfiguration().then(packageContent => {
            destination("/css").then(destinationDirectory => {
                let currentCollection = packageContent["compileConfig"]["template"]["scss"];

                if (Array.isArray(currentCollection) && currentCollection.length > 0) {
                    gulp.src(currentCollection)
                        .pipe(sourceMapPlugin.init())
                        .pipe(sassPlugin().on("error", sassPlugin.logError))
                        .pipe(gulp.dest(destinationDirectory))
                        .pipe(cssoPlugin())
                        .pipe(renamePlugin({ suffix: ".min" }))
                        .pipe(sourceMapPlugin.write("./"))
                        .pipe(gulp.dest(destinationDirectory));
                }

                resolve();
            }).catch(reason => {
                reject(reason);
            });
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Concat JavaScript files defined in config file.
 *
 * @return {Promise}
 */
function concatTemplate() {
    return new Promise((resolve, reject) => {
        readConfiguration().then(packageContent => {
            destination("/js").then(destinationDirectory => {
                let currentCollection = packageContent["compileConfig"]["template"]["js"];

                if (Array.isArray(currentCollection) && currentCollection.length > 0) {
                    gulp.src(currentCollection)
                        .pipe(sourceMapPlugin.init())
                        .pipe(concatPlugin("template.js"))
                        .pipe(gulp.dest(destinationDirectory))
                        .pipe(uglifyPlugin())
                        .pipe(renamePlugin({ suffix: ".min" }))
                        .pipe(sourceMapPlugin.write("./"))
                        .pipe(gulp.dest(destinationDirectory));
                }

                resolve();
            }).catch(reason => {
                reject(reason);
            });
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Concat JavaScript vendor files defined in config file.
 *
 * @return {Promise}
 */
function concatVendorScript() {
    return new Promise((resolve, reject) => {
        readConfiguration().then(packageContent => {
            destination("/js").then(destinationDirectory => {
                let currentCollection = packageContent["compileConfig"]["vendor"]["js"];

                if (Array.isArray(currentCollection) && currentCollection.length > 0) {
                    gulp.src(currentCollection)
                        .pipe(sourceMapPlugin.init())
                        .pipe(concatPlugin("vendor.js"))
                        .pipe(gulp.dest(destinationDirectory))
                        .pipe(uglifyPlugin())
                        .pipe(renamePlugin({ suffix: ".min" }))
                        .pipe(sourceMapPlugin.write("./"))
                        .pipe(gulp.dest(destinationDirectory));
                }

                resolve();
            }).catch(reason => {
                reject(reason);
            });
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Concat Style vendor files defined in config file.
 *
 * @return {Promise}
 */
function concatVendorStyle() {
    return new Promise((resolve, reject) => {
        readConfiguration().then(packageContent => {
            destination("/css").then(destinationDirectory => {
                let currentCollection = packageContent["compileConfig"]["vendor"]["css"];

                if (Array.isArray(currentCollection) && currentCollection.length > 0) {
                    gulp.src(currentCollection)
                        .pipe(sourceMapPlugin.init())
                        .pipe(tapPlugin(function (file, t) {
                            let dirName = path.dirname(file.path);
                            let prependPath = "../vendor" + dirName.replace(/(.*node_modules)/g, "").replace(/\\/g, "/") + "/";
                            let appendVal = "?build=" + Date.now();

                            t.through(adjusterPlugin, [{ prepend: prependPath, append: appendVal }])
                        }))
                        .pipe(concatPlugin("vendor.css"))
                        .pipe(gulp.dest(destinationDirectory))
                        .pipe(cssoPlugin())
                        .pipe(renamePlugin({ suffix: ".min" }))
                        .pipe(sourceMapPlugin.write("./"))
                        .pipe(gulp.dest(destinationDirectory));
                }

                resolve();
            }).catch(reason => {
                reject(reason);
            });
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Copy files and directories defined in configuration.
 *
 * @return {Promise}
 */
function copy() {
    return new Promise((resolve, reject) => {
        readConfiguration().then(packageContent => {
            let currentCollection = packageContent["compileConfig"]["execute"]["copy"];

            if (currentCollection !== undefined) {
                Object.keys(currentCollection).forEach(source => {
                    gulp.src(source)
                        .pipe(gulp.dest(currentCollection[source]));
                });
            }

            resolve();
        }).catch(reason => {
            reject(reason);
        })
    });
}

/**
 * Watch changes in SCSS files.
 *
 * @return {Promise}
 */
function watchStyle() {
    return new Promise((resolve, reject) => {
        source("/scss/**/*.scss").then(sourceDirectory => {
            gulp.watch(sourceDirectory, gulp.series(lintSass, compileSass));
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Watch changes in JS files.
 *
 * @return {Promise}
 */
function watchScript() {
    return new Promise((resolve, reject) => {
        source("/js/**/*.js").then(sourceDirectory => {
            gulp.watch(sourceDirectory, gulp.series(concatTemplate));
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Read configuration.
 *
 * @return {Promise}
 */
function readConfiguration() {
    return new Promise((resolve, reject) => {
        fs.readFile("./package.json", (err, configData) => {
            if (err) reject(err);

            resolve(JSON.parse(configData));
        });
    });
}

/**
 * Generate source path with specified value.
 *
 * @param value
 * @param prefix
 * @return {Promise}
 */
function source(value, prefix) {
    return new Promise((resolve, reject) => {
        readConfiguration().then(configData => {
            const sourceDirectory = configData["config"]["sourceDirectory"];

            if (sourceDirectory !== undefined && sourceDirectory !== "") {
                resolve(
                    prefix !== undefined && prefix !== "" ? prefix + sourceDirectory + value : sourceDirectory + value
                );
            }

            reject();
        }).catch(reason => {
            reject(reason);
        });
    });
}

/**
 * Generate destination path with specified value.
 *
 * @param value
 * @param prefix
 * @return {Promise}
 */
function destination(value, prefix) {
    return new Promise((resolve, reject) => {
        readConfiguration().then(configData => {
            const destinationDirectory = configData["config"]["destinationDirectory"];

            if (destinationDirectory !== undefined && destinationDirectory !== "") {
                resolve(
                    prefix !== undefined && prefix !== "" ? prefix + destinationDirectory + value : destinationDirectory + value
                );
            }

            reject();
        }).catch(reason => {
            reject(reason);
        });
    });
}

exports.default = gulp.series(lintSass, compileSass, concatTemplate, concatVendorStyle, concatVendorScript, copy);
exports.prepareStyle = gulp.series(lintSass, compileSass, concatVendorStyle);
exports.prepareScript = gulp.series(concatTemplate, concatVendorScript);

exports.watch = gulp.parallel(watchStyle, watchScript);
exports.watchStyle = watchStyle;
exports.watchScript = watchScript;

package.json

{
    "name": "..",
    "repository": "..",
    "author": "..",
    "license": "proprietary",
    "scripts": {
        "compile": "gulp",
        "compile-style": "gulp prepareStyle",
        "compile-script": "gulp prepareScript",
        "watch": "gulp watch"
    },
    "dependencies": {},
    "devDependencies": {
        "gulp": "^4.0.0",
        "gulp-concat": "..",
        "gulp-css-url-adjuster": "..",
        "gulp-csso": "..",
        "gulp-rename": "..",
        "gulp-sass": "..",
        "gulp-sass-lint": "..",
        "gulp-sourcemaps": "..",
        "gulp-tap": "..",
        "gulp-uglify": "..",
        "sass-lint": ".."
    },
    "config": {
        "sourceDirectory": "./assets",
        "destinationDirectory": "./public/assets"
    },
    "compileConfig": {
        "template": {
            "scss": [
                "assets/scss/template.scss"
            ],
            "js": [
                "assets/js/template.js"
            ]
        },
        "vendor": {
            "js": [],
            "css": []
        },
        "execute": {
            "copy": {
                "assets/images/**/*": "public/assets/images"
            }
        }
    }
}