gulpfile.js

// ##### Gulp Tasks #####

var { src, dest, watch, series, parallel } = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var server = browserSync.create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var modernizr = require('gulp-modernizr');
var runSequence = require('run-sequence');
var stylelint = require('gulp-stylelint');
var jshint = require('gulp-jshint');
var lbInclude = require('gulp-lb-include');
var ssi = require('browsersync-ssi');
var postcss = require('gulp-postcss');
var assets = require('postcss-assets');
var ghPages = require('gulp-gh-pages');

// Public Tasks:

exports.default = parallel(scss, start, watcher);

exports.build = series(clean, fonts, scsslint, jslint, scss, assemble, copyimages);

exports.upload = githubpages;

exports.modernizr = runmodernizr;

// Process scss to css, add sourcemaps, inline font & image files into css:

sass.compiler = require('node-sass');

function scss(cb) {
  return src('dev/scss/*.scss', { sourcemaps: true })
  .pipe(sass().on('error', sass.logError))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(postcss([assets({
    loadPaths: ['fonts/', 'images/']
  })]))
  .pipe(dest('dev/css', { sourcemaps: 'sourcemaps' }))
  .pipe(browserSync.stream());
  cb();
}

// Watch scss, html, and js and reload browser if any changes:

function watcher(cb) {
  watch('dev/scss/*.scss', series(scss, refresh, scsslint));
  watch('dev/js/*.js', series(jslint, refresh));
  watch('dev/**/*.html', refresh);
  cb();
}

function refresh(cb) {
  server.reload()
  cb();
}

function start(cb) {
  server.init({
    open: false,
    reloadOnRestart: true,
    server: {
      baseDir: 'dev',
      middleware: ssi({
        baseDir: __dirname + '/dev',
        ext: '.html',
        version: '1.4.0'
      })
    }
  })
  cb();
}

// Minify and uglify css and js from paths within useref comment tags in html:

function assemble(cb) {
  return src(['dev/**/*.html', '!dev/includes/*'])
  .pipe(gulpIf('*.css', minifyCSS()))
  .pipe(gulpIf('*.js', uglify()))
  .pipe(useref())
  .pipe(lbInclude()) // parse <!--#include file="" --> statements
  .pipe(dest('ui_library'))
  cb();
}

// Compress images and copy from dev/images/ into dev/ui_library/images/:

function copyimages(cb) {
  return src('dev/images/**/*.+(png|jpg|jpeg|gif|svg)')
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(dest('ui_library/images'))
  cb();
}

// Copy font files from dev/fonts/ into dev/ui_library/fonts/:

function fonts(cb) {
  return src('dev/fonts/**/*')
  .pipe(dest('ui_library/fonts'))
  cb();
}

// Delete ui_library directory at start of build process:

function clean(cb) {
  return del('ui_library');
  cb();
}

// Lint Sass:

function scsslint(cb) {
  return src(['dev/scss/*.scss', '!dev/scss/vendor/*.scss'])
  .pipe(stylelint({
    reporters: [
      {formatter: 'string', console: true}
    ]
  }));
  cb();
}

// Lint JavaScript:

function jslint(cb) {
  return src(['dev/js/**/*.js', '!dev/js/vendor/*.js'])
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  cb();
}

// Upload ui_library build to GitHub Pages:

function githubpages(cb) {
  return src('./ui_library/**/*')
  .pipe(ghPages())
  cb();
}

// Run "gulp modernizr" to build a custom modernizr file based off of classes found in CSS:

function runmodernizr(cb) {
  return src('dev/css/main2.css') // where modernizr will look for classes
  .pipe(modernizr({
    options: ['setClasses'],
    dest: 'dev/js/modernizr-custombuild.js'
  }))
  cb();
}