Gulp file to automate WordPress theme development workflow

gulpfile.babel.js

import gulp from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCSS from 'gulp-clean-css';
import gulpif from 'gulp-if';
import sourcemaps from 'gulp-sourcemaps';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import uglify from 'gulp-uglify';
import named from 'vinyl-named';
import browserSync from 'browser-sync';
import zip from 'gulp-zip';
import replace from 'gulp-replace';
import info from './package.json';

const PRODUCTION = yargs.argv.prod;
const server = browserSync.create();

const path = {
    styles : {
        src : ['src/assets/scss/bundle.scss', 'src/assets/scss/admin.scss'],
        dest : 'dist/assets/css'
    },
    scripts : {
        src : ['src/assets/js/bundle.js', 'src/assets/js/admin.js'],
        dest : 'dist/assets/js'
    },
    images : {
        src : ['src/assets/images/**/*.{jpg,png,jpeg,svg,gif}'],
        dest : 'dist/assets/images'
    },
    other : {
        src : ['src/assets/**/*', '!src/assets/{images,js,scss}', '!src/assets/{images,js,scss}/**/*'],
        dest : 'dist/assets'
    },
    package: {
        src: ['**/*', '!.vscode', '!node_modules{,/**}','!packaged{,/**}', '!src{,/**}', '!.babelrc', '!.gitignore', '!gulpfile.babel.js', '!package.json', '!package-lock.json'],
        dest: 'packaged'
    }
}

// Style task
export const styles = () => {
    return gulp.src(path.styles.src)
            .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
            .pipe(sass().on('error', sass.logError))
            .pipe(gulpif(PRODUCTION, cleanCSS({compatibility: 'ie8'})))
            .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
            .pipe(gulp.dest(path.styles.dest))
            .pipe(server.stream());
}

// Script task
export const scripts = () => {
    return gulp.src(path.scripts.src)
                .pipe(named())
                .pipe(webpack({
                    module: {
                        rules: [
                            {
                                test: /\.m?js$/,
                                exclude: /(node_modules|bower_components)/,
                                use: {
                                    loader: 'babel-loader',
                                    options: {
                                        presets: ['@babel/preset-env']
                                    }
                                }
                            }
                        ]
                    },
                    output: {
                        filename: '[name].js'
                    },
                    externals: {
                        jquery: 'jQuery'
                    },
                    devtool: !PRODUCTION ? 'inline-source-map' : false
                }))
                .pipe(gulpif(PRODUCTION, uglify()))
                .pipe(gulp.dest(path.scripts.dest));
}

// Image task
export const images = () => {
    return gulp.src(path.images.src)
                .pipe(gulpif(PRODUCTION, imagemin()))
                .pipe(gulp.dest(path.images.dest));
}

// Copy task
export const copy = () => {
    return gulp.src(path.other.src)
                .pipe(gulp.dest(path.other.dest));
}

// Clean task
export const clean = (done) => del(['dist']);

// Watch task
export const watch = () => {
    gulp.watch('src/assets/scss/**/*.scss', styles);
    gulp.watch('src/assets/js/**/*.js', gulp.series(scripts, reload));
    gulp.watch(path.images.src, gulp.series(images, reload));
    gulp.watch(path.other.src, gulp.series(copy, reload));
    gulp.watch('**/*.php', reload);
}

// Server task
export const serve = (done) => {
    server.init({
        proxy: "http://npmpractice.com/"
    });
    done();
}

// Reload task
export const reload = (done) => {
    server.reload();
    done();
}

// Compress task
export const compress = () => {
    return gulp.src(path.package.src)
            .pipe(replace('_themename', info.name))
            .pipe(zip(`${info.name}.zip`))
            .pipe(gulp.dest(path.package.dest));
}

// Command tasks
export const dev = gulp.series(clean, gulp.parallel(styles, images, scripts, copy), serve, watch);
export const build = gulp.series(clean, gulp.parallel(styles, images, scripts, copy));
export const bundle = gulp.series(build, compress);

// Default task
export default dev;