Get EVO PRO - Full Featured WordPress Theme

Gulp 4.0 & NodeJS, ImageMin, BrowserSync, SASS, SourceMaps, CleanCSS & More

Subscribe To PixemWeb on YouTube

Gulp 4.0.0 is the current version of Gulp and with the update, significant changes have been made. This article will provide you with the code featured in the video on YouTube. In that video, I walk you through how to install NodeJS on your computer and how to configure your Package.json file and your Gulp file.

I demonstrate using Gulp 4 with DevWP which is a WordPress Development Training Theme where I show people how to code their very own custom WordPress theme using some of the best tools and resources.

NOTE: To work with DevWP, It’s best to create a folder in the themes folder. I call mine, dev-gulp. In the dev-gulp folder is where you would place the package.json file and gulpfile.js.
So your folder structure starting from the wp-content -> themes, there should be two folders aka directories. One for devwp the actual theme and the other for dev-gulp where GulpJS will work from.

Updated Package and Gulp files

Since recording the video, I’ve changed the directory files for DevWP and I updated the Package and Gulp Files. New code below.

New Package JSON File


{
  "name": "dev-gulp",
  "version": "1.0.1",
  "description": "Gulp for DevWP WordPress Development Training Theme",
  "author": "PixemWeb",
  "license": "GPL-3.0",
  "devDependencies": {
    "browser-sync": "^2.26.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {}
}

New Gulp File


const themename = 'devwp';

// You can declare multiple variables with one statement by starting with var and seperate the variables with a comma and span multiple lines.
// Below are all the Gulp Plugins we're using.
const gulp          = require('gulp'),
      autoprefixer  = require('gulp-autoprefixer'),
      browserSync   = require('browser-sync').create(),
      reload        = browserSync.reload,
      sass          = require('gulp-sass'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify');

const root          = '../' + themename + '/',
      scss          = root + 'sass/',
      js            = root + 'src/js/',
      jsDist        = root + 'dist/js/';

const phpWatchFiles   = root + '**/*.php',
      styleWatchFiles = scss + '**/*.scss';

const jsSrc = [
      js + 'bootstrap.bundle.js',
      js + 'bootstrap-hover.js',
      js + 'nav-scroll.js',
      js + 'prism.js',
      js + 'resizeSensor.js',
      js + 'sticky-sidebar.js',
      js + 'sticky-sb.js',
      js + 'skip-link-focus-fix.js'
];

function css() {
  return gulp.src(scss + 'style.scss', { sourcemaps: true })
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest(root, { sourcemaps: '.' }));
}

function editorCSS() {
  return gulp.src(scss + 'style-editor.scss' )
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(gulp.dest(root + 'dist/'));
}

function javascript() {
  return gulp.src(jsSrc)
    .pipe(concat('devwp.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsDist));
}

function watch() {
    browserSync.init({
      open: 'external',
      proxy: 'http://localhost/dev/',
    });
    gulp.watch(styleWatchFiles, css);
    gulp.watch(styleWatchFiles, editorCSS);
    gulp.watch(jsSrc, javascript);
    gulp.watch([phpWatchFiles, jsDist + 'devwp.js', root + 'style.css']).on('change', reload);
}

exports.css = css;
exports.editorCSS = editorCSS;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);

Older: Package.json Code

This file is what’s used to get the various dependencies from NPM which is the Node Package Manager. By placing this code snippet below into your project folder, you’ll be able to navigate via the command line to that folder and use the command npm install


{
  "name": "dev-gulp",
  "version": "1.0.0",
  "description": "Gulp for DevWP WordPress Development Training Theme",
  "author": "PixemWeb",
  "license": "GPL-3.0",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^5.0.3",
    "gulp-line-ending-corrector": "^1.0.3",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1"
  }
}

Older: Here’s The Code for the GulpFile

In your project folder, you will need to create a gulpfile.js file which is what Gulp will process. Make sure that your gulp file is in the same project folder as your package.json file.


var themename = 'devwp';
var gulp = require( 'gulp' ),
    autoprefixer = require( 'gulp-autoprefixer' ),
    browserSync  = require( 'browser-sync' ).create(),
    reload  = browserSync.reload,
    sass  = require( 'gulp-sass' ),
    cleanCSS  = require( 'gulp-clean-css' ),
    sourcemaps  = require( 'gulp-sourcemaps' ),
    concat  = require( 'gulp-concat' ),
    imagemin  = require( 'gulp-imagemin' ),
    changed = require( 'gulp-changed' ),
    uglify  = require( 'gulp-uglify' ),
    lineec  = require( 'gulp-line-ending-corrector' );

var root  = '../' + themename + '/',
    scss  = root + 'sass/',
    js  = root + 'src/js/',
    jsdist  = root + 'dist/js/';

// Watch Files

var PHPWatchFiles  = root + '**/*.php',
    styleWatchFiles  = root + '**/*.scss';

// Used to concat the files in a specific order.
var jsSRC = [
    js + 'bootstrap.bundle.js',
    js + 'bootstrap-hover.js',
    js + 'nav-scroll.js',
    js + 'prism.js',
    js + 'resizeSensor.js',
    js + 'sticky-sidebar.js',
    js + 'sticky-sb.js',
    js + 'skip-link-focus-fix.js'
];

// Used to concat the files in a specific order.
var cssSRC =  [
  root + 'src/css/bootstrap.css',
  root + 'src/css/all.css',
  root + 'src/css/prism.css',
  root + 'style.css',
];

var imgSRC = root + 'src/images/*',
    imgDEST = root + 'dist/images/';

function css() {
  return gulp.src([scss + 'style.scss'])
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sass({
    outputStyle: 'expanded'
  }).on('error', sass.logError))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.write())
  .pipe(lineec())
  .pipe(gulp.dest(root));
}

function concatCSS() {
  return gulp.src(cssSRC)
  .pipe(sourcemaps.init({loadMaps: true, largeFile: true}))
  .pipe(concat('style.min.css'))
  .pipe(cleanCSS())
  .pipe(sourcemaps.write('./maps/'))
  .pipe(lineec())
  .pipe(gulp.dest(scss));
}

function javascript() {
  return gulp.src(jsSRC)
  .pipe(concat('devwp.js'))
  .pipe(uglify())
  .pipe(lineec())
  .pipe(gulp.dest(jsdist));
}

function imgmin() {
  return gulp.src(imgSRC)
  .pipe(changed(imgDEST))
      .pipe( imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
      ]))
      .pipe( gulp.dest(imgDEST));
}

function watch() {
  browserSync.init({
    open: 'external',
    proxy: 'http://localhost:8888/demowp',
    port: 8080,
  });
  gulp.watch(styleWatchFiles, gulp.series([css, concatCSS]));
  gulp.watch(jsSRC, javascript);
  gulp.watch(imgSRC, imgmin);
  gulp.watch([PHPWatchFiles, jsdist + 'devwp.js', scss + 'style.min.css']).on('change', browserSync.reload);
}

exports.css = css;
exports.concatCSS = concatCSS;
exports.javascript = javascript;
exports.watch = watch;
exports.imgmin = imgmin;

var build = gulp.parallel(watch);
gulp.task('default', build);



View Our Themes

Let's Connect