Gulp setup for WordPress Theme Development

gulpfile.js

// Gulp.js configuration
'use strict';

const 
  // source and build folders
  gulp       = require('gulp'),
  gutil      = require('gulp-util'),
  sass       = require('gulp-sass'),
  postcss    = require('gulp-postcss'),
  deporder   = require('gulp-deporder'),
  concat     = require('gulp-concat'),
  uglify     = require('gulp-uglify'),
  babel      = require('gulp-babel'),
  plumber    = require('gulp-plumber'),
  notify     = require('gulp-notify')
  ;

  // Paths
  const paths = {
    dist : './dist'
  }

  // JavaScript settings
  const js = {
    src      : 'js/**/*',
    filename : 'scripts.js'
  }

  // CSS settings
  var css = {
    watch : 'sass/**/*.scss',
    sassOpts : {
      outputStyle     : 'nested',
      precision       : 3,
      errLogToConsole : true
    },
    processors : [
      require('autoprefixer')({
        browsers: ['last 2 versions', '> 2%']
      }),
      require('css-mqpacker'),
      require('cssnano')
    ]
  }

  var syncOptions = {
    proxy     : 'therodgarband.dev',
    open      : false,
    notify    : true,
    ghostMode : false,
    ui: {
      port: 3000
    }
  };

  // Plumber + Notify setup
  var plumberErrorHandler = {
    errorHandler : notify.onError({
      title: 'Gulp',
      message : 'Error: <%= error.message %>'
    })
  };

  // Browser-sync
  var browsersync = false;


  const filesToWatch  = ['./**/*.php', './**/*.twig'];
  const filesToIgnore = ['!./vendor/*', '!./node_modules/*', '!./bower_components/*'];
  

  // CSS processing
  gulp.task('css', () => {
    return gulp.src(css.watch)
      .pipe(plumber(plumberErrorHandler))
      .pipe(sass(css.sassOpts))
      .pipe(postcss(css.processors))
      .pipe(gulp.dest(paths.dist))
      .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop() );
  });

  // JavaScript processing
  gulp.task('js', () => {
    return gulp.src(js.src)
      .pipe(deporder())
      .pipe(babel({
        presets: ['es2015']
      }))
      .pipe(concat(js.filename))
      //.pipe(stripdebug()) // activate if ready to deploy to production.
      .pipe(uglify())
      .pipe(gulp.dest(paths.dist))
      .pipe(browsersync ? browsersync.reload({stream: true}) : gutil.noop() );
  });

gulp.task('build', ['css', 'js']);

// Browsersync options
// the proxy and ui is set for vagrant scotchbox development',

gulp.task('browsersync', () => {
  if (browsersync === false) {
    browsersync = require('browser-sync').create();
    browsersync.init(syncOptions);
  }
});

gulp.task('watch', ['browsersync'], () => {

  // page changes
  gulp.watch(filesToWatch.concat(filesToIgnore), browsersync ? browsersync.reload : {});

  // css changes
  gulp.watch(css.watch, ['css']);

  // javascript changes
  gulp.watch(js.src, ['js']);

});

gulp.task('default', ['build', 'watch']);

package.json

{
  "name": "",
  "version": "0.1.0",
  "main": "gulpfile.js",
  "author": "YOUR NAME HERE",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "browser-sync": "^2.18.13",
    "css-mqpacker": "^6.0.1",
    "cssnano": "^3.10.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-deporder": "^1.1.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8"
  }
}