Example gulpfile.js for WordPress theme writing to static folder

gulpfile.js

const { src, dest, parallel, series, watch } = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify-es').default;
const sourcemaps = require('gulp-sourcemaps');
const livereload = require('gulp-livereload');
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const rename = require('gulp-rename');
const imagemin = require('gulp-imagemin');
const babel = require('gulp-babel');
const bourbon = require("node-bourbon").includePaths;
const notifier = require('node-notifier');
const stripAnsi = require('strip-ansi');
const beep = require('beepbeep');

const fs = require('fs');

const project = JSON.parse(fs.readFileSync('./package.json').toString());

const paths = {
    css: {
        main: {
            files: {
                glob: 'assets/scss/**/*.scss',
                main: 'assets/scss/main.scss',
            },
            dist: 'static/'
        },
        editor: {
            files: {
                glob: 'assets/scss/**/*.scss',
                main: 'assets/scss/editor.scss',
            },
            dist: 'static/'
        },
        admin: {
            files: {
                glob: 'assets/scss/**/*.scss',
                main: 'assets/scss/admin.scss',
            },
            dist: 'static/admin/'
        }
    },
    js: {
        global: {
            files: 'assets/js/global/**/*.js',
            dist: 'static/',
        },
        vendor: {
            files: 'assets/js/vendor/**/*.js',
            dist: 'static/'
        },
        admin: {
            files: 'assets/js/admin/**/*.js',
            dist: 'static/admin/'
        },
        standalone: {
            files: 'assets/js/*.js',
            dist: 'static/'
        }
    },
    images: {
        files: 'assets/images/**/*',
        dist: 'static/images/'
    },
    fonts: {
        files: 'assets/fonts/**/*',
        dist: 'static/fonts'
    }
};

function getShortSassError(message) {
    const parts = message.split("\n");
    return parts[0];
}

const handleSassError = build => {
    return function(err) {
        console.log(err.formatted);

        if (!build) {
            beep();

            notifier.notify({
                title: project.name,
                message: `${getShortSassError(stripAnsi(err.formatted))} in ${err.relativePath}`,
            });

            this.emit('end');
        } else {
            process.exit(1)
        }
    };
};

const _css = {
    css(build = false) {
        return function css() {
            let stream = src(paths.css.main.files.main)
                .pipe(sourcemaps.init())
                .pipe(sass({
                    includePaths: bourbon
                }).on('error', handleSassError( build )))
                .pipe(concat('main.css'))
                .pipe(dest(paths.css.main.dist))
                .pipe(postcss([autoprefixer(), cssnano()]))
                .pipe(cleanCSS())
                .pipe(rename({
                    suffix: '.min'
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.css.main.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    },
    editor(build = false) {
        return function editor() {
            let stream = src(paths.css.editor.files.main)
                .pipe(sourcemaps.init())
                .pipe(sass({
                    includePaths: bourbon
                }).on('error', handleSassError( build )))
                .pipe(concat('editor.css'))
                .pipe(dest(paths.css.editor.dist))
                .pipe(postcss([autoprefixer(), cssnano()]))
                .pipe(cleanCSS())
                .pipe(rename({
                    suffix: '.min'
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.css.editor.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    },
    admin(build = false) {
        return function admin() {
            let stream = src(paths.css.admin.files.main)
                .pipe(sourcemaps.init())
                .pipe(sass({
                    includePaths: bourbon
                }).on('error', handleSassError( build )))
                .pipe(concat('main.css'))
                .pipe(dest(paths.css.admin.dist))
                .pipe(postcss([autoprefixer(), cssnano()]))
                .pipe(cleanCSS())
                .pipe(rename({
                    suffix: '.min'
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.css.admin.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    }
}

const _js = {
    global(build = false) {
        return function global() {
            let stream = src(paths.js.global.files)
                .pipe(sourcemaps.init())
                .pipe(babel())
                .pipe(concat('global.js'))
                .pipe(dest(paths.js.global.dist))
                .pipe(uglify())
                .pipe(rename({
                    suffix: '.min',
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.js.global.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    },
    vendor(build = false) {
        return function vendor() {
            let stream = src(paths.js.vendor.files)
                .pipe(sourcemaps.init())
                .pipe(concat('vendor.js'))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.js.vendor.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    },
    admin(build = false) {
        return function admin() {
            let stream = src(paths.js.admin.files)
                .pipe(sourcemaps.init())
                .pipe(babel())
                .pipe(dest(paths.js.admin.dist))
                .pipe(uglify())
                .pipe(rename({
                    suffix: '.min',
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.js.admin.dist));

            if(!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    },
    standalone(build = false) {
        return function admin() {
            let stream = src(paths.js.standalone.files)
                .pipe(sourcemaps.init())
                .pipe(babel())
                .pipe(dest(paths.js.standalone.dist))
                .pipe(uglify())
                .pipe(rename({
                    suffix: '.min'
                }))
                .pipe(sourcemaps.write('./'))
                .pipe(dest(paths.js.standalone.dist));

            if (!build) {
                stream = stream.pipe(livereload());
            }

            return stream;
        }
    }
};

function _images() {
    return function images() {
        return src(paths.images.files)
            .pipe(imagemin())
            .pipe(dest(paths.images.dist));
    }
}

function _fonts() {
    return function fonts() {
        return src(paths.fonts.files)
            .pipe(dest(paths.fonts.dist));
    }
}

function watchFiles() {
    watch(paths.css.main.files.glob, _css.css(false));
    watch(paths.css.editor.files.glob, _css.editor(false));
    watch(paths.css.admin.files.glob, _css.admin(false));

    watch(paths.js.global.files, _js.global(false));
    watch(paths.js.vendor.files, _js.vendor(false))
    watch(paths.js.admin.files, _js.admin(false));
    watch(paths.js.standalone.files, _js.standalone(false));
    watch(paths.images.files, _images());
    watch(paths.fonts.files, _fonts());
}

function initLivereload(cb) {
    livereload.listen(cb);
}

exports.default = parallel(
    _css.css(false),
    _css.editor(false),
    _css.admin(false),
    _js.global(false),
    _js.vendor(false),
    _js.admin(false),
    _js.standalone(false),
    _images(),
    _fonts()
);

exports.build = parallel(
    _css.css(true),
    _css.editor(true),
    _css.admin(true),
    _js.global(true),
    _js.vendor(true),
    _js.admin(true),
    _js.standalone(true),
    _images(),
    _fonts()
);

exports.css = _css.css(false);
exports.watch = series(exports.default, parallel(watchFiles, initLivereload));