Gulp 4 - all functions

gulpfile.js

const { src, dest, watch, parallel, series, done } = require('gulp'),
        fs = require('fs'),
        gulpif = require('gulp-if'),
        del = require('del'),
        autoprefixer = require('gulp-autoprefixer'),
        pug = require('gulp-pug'),
        nunjucks = require('gulp-nunjucks'),
        sass = require('gulp-sass'),
        cleancss = require('gulp-clean-css'),
        purgecss = require('gulp-purgecss'),
        uglify = require('gulp-uglify'),
        concat = require('gulp-concat'),
        browserSync = require('browser-sync').create()

const source = 'src'
const dist = 'build'

// sass
function scss() {
  return src( source + '/scss/styles.scss' )
    .pipe(sass({outputStyle: 'expanded'}))
      .on("error", sass.logError)
    // .pipe(gulpif(production, autoprefixer()))
    // .pipe(gulpif(production, cleancss()))
    .pipe(dest(dist + '/css'))
    .pipe(browserSync.stream())
}

// javascript
function js() {
  return src(source + '/js/**/*')
    // .pipe(concat({path: "bundle.js"}))
    // .pipe(uglify())
    // .pipe(dest(source + '/js'))
    .pipe(dest(dist + '/js'))
    .pipe(browserSync.stream())
}

// pug
function pugHtml() {
  return src(source + '/pug/*.pug')
    .pipe(pug({pretty: true}))
    .pipe(dest(dist))
    .pipe(browserSync.stream())
}

  // pug with data loaded from json
  // can load multiple files within the data: {} object
function pugHtmlWithData() {}
  return src(source + '/pug/*.pug')
    .pipe(pug({
      data: {
        "jobs": JSON.parse(
          fs.readFileSync(source + '/data/jobs.json', { encoding: 'utf8' })
        )
      },
      pretty: true
    }))
    .pipe(dest(dist))
    .pipe(browserSync.stream())
}


// nunjucks
function nunjucksHtml() {
  return src(source + '/html/*.html')
    .pipe(nunjucks.compile({}))
    .pipe(dest(dist))
    .pipe(browserSync.stream())
}

// gather images
function images() {
  return src(source + '/img/**/*')
    .pipe(dest(dist))
    .pipe(browserSync.stream())
}

// gather fonts
function fonts() {
  return src(source + '/webfonts/**/*')
    .pipe(dest(dist))
    .pipe(browserSync.stream())
}

// delete everything in DIST
function clean() {
  return del([
    dist + '/**/*'
  ])
}

// rebuild all clean
function cleanBuild(done) {
  return series(
    clean,
    parallel(html, js, scss, images, fonts)
  )(done)
}

// purge unused css
function purgeStyles() {
  return src( source + '/scss/styles.scss' )
    .pipe(sass({outputStyle: 'compressed'}))
      .on("error", sass.logError)
    .pipe(rename({suffix: '-purged'}))
    .pipe(purgecss({
      content: [
        dist + '/*.html',
        dist + 'js/**/*.js'
      ]
    }))
    .pipe(dest(dist + '/css'))
}

// start the browser-sync server
function startServer() {
  browserSync.init({
    server: {
      baseDir: dist,
    },
    ui: {
      port: 8080
    },
    notify: false
  })
}

function watchers() {
  startServer()

  // desired html function first
  watch(source + 'html/**/*', html)
  // watch(source + 'pug/**/*', pugHtml)
  // watch(source + 'html/**/*', nunjucksHtml)
  watch(source + 'js/**/*', js)
  watch(source + 'scss/**/*', scss)

  watch('dist/**/*.*').on('change', browserSync.reload)
}

exports.html            = html
exports.nunjucksHtml    = nunjucksHtml
exports.pugHtml         = pugHtml
exports.pugHtmlWithData = pugHtmlWithData
exports.js              = js
exports.scss            = scss
exports.purgeStyles     = purgeStyles
exports.images          = images
exports.fonts           = fonts
exports.clean           = clean
exports.cleanBuild      = cleanBuild
exports.watchers        = watchers

exports.default = series(parallel(scss, html), watchers)

042419 540pm: Updated to Gulp 4's much cleaner build style. The Javascript function is still working oddly, can only track it down as a known bug right now.

032720 9pm: been using derivation of this for a while and it seems stable. Adding additional functions (nunjucks, purgecss, etc.) to make it viable as boilerplate.

032820 740am: removed Paths global, replaced with inline paths. Using source and dist for source and distribution folders

070320 7:30pm: added pug with data function, allowing loading of JSON along with pug transformations. Also cleaned up the watchers globs to **/*, which I think is the right format for "everything in every folder".