I use Gulp to compile Sass and JS with WordPress. Admittedly, I’m new to this, but wanted to share how I set it up and what my gulp files look like!

First, from your WordPress theme folder, install Gulp:

npm install --global gulp-cli

Then, create package.json:

npm init

Then, install Gulp in your theme:

npm install --save-dev gulp

Create a gulp.js fil

touch gulpfile.ems.js

Now create a folder in your theme called tasks. My setup includes four tasks: compileScripts.js, compileStyles.js, watchScripts.js and watchStyles.js

compileScripts.js

Here are the contents of these files- this will take JS from a file called theme.js, compile it, minify and pipe it to a file called main.js. Both theme.js and main.js are in the root of the theme folder. Obviously I have installed all of the other node modules being imported and used here.

import { dest } from 'gulp';
import browserify from 'browserify';
import rename from 'gulp-rename';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import esmify from 'esmify';
import tinyify from 'tinyify';
import watchify from 'watchify';
import log from 'gulplog';
import babelify from 'babelify';

/**
 * Set up browserify options.
 */
const b = browserify({
    entries: [
        './theme.js'
    ],
    paths: [
        './js',
    ],
    plugin: [
        esmify,
        tinyify,
        watchify
    ],
    cache: {},
    packageCache: {},
    transform: [babelify]
});

/**
 * Tell browserify to bundle starting at the entry point js file, rename to main js file,
 * and deliver to assets folder.
 *
 * @return  {void}
 */
export function bundleScripts() {
    return b.bundle()
        .on('error', log.error.bind(log, 'Browserify Error'))
        .pipe(source('./theme.js'))
        .pipe(buffer())
        .pipe(rename('main.js'))
        .pipe(dest('./'));
}

/**
 * Gulp task: compile scripts
 * * Tell browserify to call 'bundle()' on update. This will inject the output bundle with changes rather than
 * rebuild the whole thing.
 * * Calls bundle method on initial run.
 *
 * @return  {stream}
 */
export default function compileScripts(done) {
    b.on('update', bundleScripts);
    b.on('log', log.info);
    bundleScripts();
    done();
};

compileStyles.js

This file compiles styles from style.scss (which lives in a directory called sass) and pipes the compiled styles to a file called style.css in the theme root.

import { src, dest } from 'gulp';
import rename from 'gulp-rename';
import pump from 'pump';

const sass = require('gulp-sass')(require('sass'));

/**
 * Gulp task: compile styles
 *
 * * compiles scss to css.
 * * renames output file.
 * * delivers to assets folder.
 *
 * @see        {url} 'https://github.com/mafintosh/pump'
 *
 * @returns    {stream}
 */
export default function compileStyles(cb){
    pump([
        src('sass/style.scss'),
        sass(),
        rename('style.css'),
        dest('./')
    ], cb);
};

watchScripts.js

This file tells gulp to watch main.js for changes and compile scripts.

import { series, watch } from 'gulp';
import compileScripts from './compileStyles';

/**
 * Gulp task: watch scripts
 *
 * @return  {stream}
 */
export default function watchScript() {
    return watch("js/main.js", series(
        compileScripts
    ));
}

watchStyles.js

This file tells gulp to watch the sass directory for changes and compile styles.

import { series, watch } from 'gulp';
import compileStyles from './compileStyles';

/**
 * Gulp task: watch styles
 *
 * @return  {stream}
 */
export default function watchStyles() {
    return watch("sass/**/*.scss",
        compileStyles);
}

gulp.esm.js

This file is the main gulp file that defines gulp tasks. As set up below, the four tasks above will be called on “default” or when gulp is called from the command. Once all of this is correctly installed when I type “gulp” in the terminal from theme root, styles will compile, scripts will compile, and a watcher will be turned on for both styles and scripts to compile them as I develop.

import { series, parallel } from 'gulp';
import compileScripts from './tasks/compileScripts';
import compileStyles from './tasks/compileStyles';
import watchStyles from './tasks/watchStyles';
import watchScripts from './tasks/watchScripts';

/**
 * All exported functions from files in `/tasks` are recognized by Gulp >= 4 as discrete tasks. This differs from naming
 * tasks with strings as in Gulp < 4. All Gulp tasks are written in ES6 Javascript, utilizing imports and exports. This
 * is possible through the ESM module which transpiles the ES6 code at runtime and is why `gulpfile.js` is named
 * `gulpfile.esm.js` See: https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles#transpilation The intent is
 * to provide a unified syntax when working with ES6 code elsewhere in the codebase.
 */

/**
 * Default gulp task.
 */
export default series(
    compileScripts,
    compileStyles,
    parallel(watchStyles, watchScripts)
);

/**
 * Individual gulp tasks may be registered below as needed.
 */
export {
    compileScripts,
    compileStyles,
    watchStyles,
    watchScripts
};

To Note:

I’m using a ton of other node modules etc here, all of these would need to be installed 😀 You also need to install esm. I also had to npm install –save-dev sass in order to designate a sass compiler.