Gulp setup for wordpress development

gulpfile.babel.js

import gulp from 'gulp';
// utility
import rename from 'gulp-rename';
import debug from 'gulp-debug';
import changed from 'gulp-changed';
import gutil from 'gulp-util';
import del from 'del';
import sequence from 'gulp-sequence';
// html
import pug from 'gulp-pug';
import htmlmin from 'gulp-htmlmin';
// js
import sourcemaps from 'gulp-sourcemaps';
import babel from 'gulp-babel';
// css and sass
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
// image optimization
import cache from 'gulp-cache';
import imagemin from 'gulp-imagemin';
// browser reload
import browsersync from 'browser-sync';

const project = {
  name: `${__dirname}`,
  host: 'http://vccw.dev',
};

const isProduction = gulp.env.p || gulp.env.prod || gulp.env.production;
const isStatic = gulp.env.s || gulp.env.static;

const dir = {
  src: {
    base: 'src',
    noop: 'src/**/*.+(htm|html|php|css)',
    sass: 'src/**/main.scss',
    pug: 'src/**/pug/**/*.pug',
    js: 'src/**/js/**/*.js',
    images: 'src/**/images/**/*.+(png|jpg|jpeg|svg)',
    fonts: 'src/**/fonts/*.woff',
  },
  dev: 'www/wordpress/wp-content/',
  dist: 'dist',
};

const dest = isProduction ? dir.dist : dir.dev;

const options = {
  image: {
    optimizationLevel: 7,
    progressive: true,
    verbose: true,
    interlaced: true,
    multipass: true,
  },
  css: [
    autoprefixer({
      browsers: ['last 3 versions', 'IE 7'],
    }),
    cssnano(),
  ],
  babel: {
    presets: ['es2015'],
  },
};

const reload = browsersync.reload;

// purge (rm -rf) before build
gulp.task('clean', (cb) => {
  if (isProduction) {
    // _only_ target contents of dist
    // excluding dist itself
    return del([`${dir.dist}/*`, `!${dir.dist}`], cb);
  }

  // development build is persistent
  return cb();
});

// start browsersync instance
// if static & development, use static
// else, use proxy (wordpress)
gulp.task('serve', () => {
  if (isStatic && !isProduction) {
    return browsersync.init({
      server: {
        baseDir: dir.src.base,
        index: 'index.php',
      },
    });
  }

  return browsersync.init({
    proxy: {
      target: project.host,
    },
    open: 'external',
  });
});

// pass files that need no processing (read: no operation)
gulp.task('noop', () => {
  gulp.src(dir.src.noop)
    .pipe(changed(dest))
    .pipe(gulp.dest(dest));
});

// build HTML
// minify if production
gulp.task('buildHtml', () => {
  gulp.src(dir.src.pug)
    .pipe(changed(dest))
  // start processing
    .pipe(pug())
    .pipe(isProduction ? htmlmin() : gutil.noop())
  // end processing
    .pipe(gulp.dest(dest));
});

// process sass files
gulp.task('buildCss', () => {
  gulp.src(dir.src.sass)
  // print stream contents (for debugging purposes, remove if not needed)
    .pipe(debug({ title: 'buildCss input' }))
  // only init sourcemaps, when development build
    .pipe(isProduction ? gutil.noop() : sourcemaps.init())
  // start processing
    .pipe(sass())
  // dont break stream on error
    .on('error', sass.logError)
  // apply postcss if production build
    .pipe(isProduction ? postcss(options.css) : gutil.noop())
  // end processing
    .pipe(isProduction ? gutil.noop() : sourcemaps.write())
  // rename scss parent-directory to css
    .pipe(rename((path) => {
      path.dirname = path.dirname.replace(/(?=[\\\/]+)?(scss)+(?=[^\\\/])?/, 'css');
    }))
    .pipe(gulp.dest(dest));
});

// build javascript
// write sourcemaps if development
gulp.task('buildJs', () => {
  gulp.src(dir.src.js)
    .pipe(changed(dest))
    .pipe(isProduction ? gutil.noop() : sourcemaps.init())
  // start processing
    .pipe(babel(options.babel))
  // end processing
    .pipe(isProduction ? gutil.noop() : sourcemaps.write())
    .pipe(gulp.dest(dest));
});

// optimize images if production
gulp.task('optimizeImages', () => {
  gulp.src(dir.src.images)
    .pipe(changed(dest))
  // start processing
    .pipe(isProduction
    ? cache(imagemin(options.images))
    : gutil.noop()
    )
  // end processing
    .pipe(gulp.dest(dest));
});

// pass any fontfiles
gulp.task('passFonts', () => {
  gulp.src(dir.src.fonts)
    .pipe(changed(dest))
    .pipe(gulp.dest(dest));
});

// all the tasks that should be used
gulp.task('scripts',
  ['noop',
    'buildHtml',
    'buildCss',
    'buildJs',
    'optimizeImages',
    'passFonts']
);

// purge the dist directory before building
gulp.task('build', sequence(['clean'], ['scripts']));

gulp.task('watch', ['build'], () => {
  gulp.watch(`${dir.src.base}/**/*.+(htm|html|php|css)`, ['noop', reload]);
  gulp.watch(`${dir.src.base}/**/*.pug`, ['buildHtml', reload]);
  gulp.watch(`${dir.src.base}/**/*.scss`, ['buildCss', reload]);
  gulp.watch(`${dir.src.base}/**/*.js`, ['buildJs', reload]);
  gulp.watch(`${dir.src.base}/**/*.+(png|jpg|jpeg|svg)`, ['optimizeImages', reload]);
});

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