Sample Gulpfile

gulpfile.js

// General use modules

var gulp = require('gulp'); // For obvious reasons
var gutil = require('gulp-util'); // Because nothing works without it
var watch = require('gulp-watch'); // It know what you're up to

var plumber = require('gulp-plumber'); // Stops errors from breaking Gulp
var gulpif = require('gulp-if'); // Logical, Captain
var argv = require('yargs').argv; // I DON'T KNOW WHAT WE'RE YELLING ABOUT!
var filter = require('gulp-filter'); // Filters things, I guess?

var changed = require('gulp-changed'); // Only process changed files
var imagemin = require('gulp-imagemin'); //  Minify images
var pngquant = require('imagemin-pngquant'); // png plugin for imagemin

var notify = require("gulp-notify"); // Pops up an OS notification window. Can be configured, but not essential.
var beep = require('beepbeep'); // It beeps.
var concat = require('gulp-concat'); // It smushes
var rename = require('gulp-rename'); // Ronseal

// JS modules

var minify = require('gulp-minify'); // JS Minification plugin
var strip = require('gulp-strip-comments'); // Ronseal

// Sass modules

var scss = require('gulp-sass'); // Libsass as opposed to Ruby..
var gcmq = require('gulp-group-css-media-queries'); // Groups media queries together and reduces file size ~ a third. Also, neater.
var sourcemaps = require('gulp-sourcemaps'); //  Generates sourcemaps
var autoprefixer = require('gulp-autoprefixer'); // Does away with need for mixins for everything.

// PostCSS Modules

var gulpPostcss = require('gulp-postcss'); // Do fun things after compiling
var cssdeclsort = require('css-declaration-sorter'); // Sorts all the declarations into alphabetical, SMACSS etc..
var minifyCSS = require('csswring'); // Minifies CSS
var mergeRules = require('postcss-merge-rules'); // Merges rules which are similar or share/duplicate declarations
var split = require('postcss-critical-split'); // Pull out above-the-fold css for faster rendering.


// CSS Modules

var csslint = require('gulp-csslint'); // CSS Linting plugin. Quite verbose!

// Other modules

var htmlmin = require('gulp-htmlmin'); // Removes whitespace
var cleanhtml = require('gulp-cleanhtml'); // Also removes whitespace. Let's make them fight.
var browser = require('browser-sync'); // Reload and sync between devices
var print = require('gulp-print'); // I honestly can't remember what this does, but I've obviously used it.

//Functions

var onError = function(err) {
  notify.onError({
    title: "gulp error in " + err.plugin,
    message: err.toString()
  })(err);
  this.emit('end');
};


// BrowserSync
function browserSync(done) {
  browser({
       proxy: "site.local",
       open: false
   });
  done();
}

// BrowserSync Reload
function browserSyncReload(done) {
  browserSync.reload();
  done();
}


// Optimize Images
function images() {
  return gulp
    .src("./src/assets/images/**/*.{gif,jpg,jpeg,svg,png}")
    .pipe(gulpif(argv.design,changed("./public_html/assets/images/*.{png,gif,jpg,jpeg,svg}")))
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true
            }
          ]
        })
      ])
    )
    .pipe(gulp.dest("./public_html/assets/images/"))
    .pipe(browser.reload({stream: true}))
    done();
}

// CSS task
function css(done) {
  return gulp
    .src("./src/assets/stylesheets/**/*.scss")
    .pipe(plumber({
      errorHandler: onError
    })) // Don't stop for errors or completion
    .pipe(gulpif(argv.design,changed('./public_html/assets/stylesheets/**/*.css')))
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(scss({
      errLogToConsole: true
    }))
    //  Begin sass process
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 4 versions']
    })) // Prefix for a specified amount of compatability
    .pipe(gcmq())
    .pipe(sourcemaps.write('./maps', {addComment: false}))
    .pipe(gulp.dest('./public_html/assets/stylesheets')) // And write to disk.
    .pipe(browser.reload({stream: true}))
    .pipe(notify({"message": "Compiled <%= file.relative %>."}))
    done();
}

function splitcsscritical(done) {
  return gulp
    .src("./public_html/assets/stylesheets/*.css")
    .pipe(plumber({
      errorHandler: onError
    })) // Don't stop for errors or completion
    .pipe(gulpPostcss([
    split(),
    //mergeRules(),
    minifyCSS({removeAllComments: true}),
    cssdeclsort({
      order: 'alphabetically'
    })
    ]))
    .pipe(gulp.dest('./templates/_inline')) // And write to disk.
    .pipe(browser.reload({stream: true}))
    .pipe(notify({"message": "Compiled <%= file.relative %>."}))
    done();
}

function splitcssrest(done) {
  return gulp
    .src("./public_html/assets/stylesheets/*.css")
    .pipe(plumber({
      errorHandler: onError
    })) // Don't stop for errors or completion
    .pipe(gulpPostcss([
    split({
      'output': 'rest'
    }),
    mergeRules(),
    minifyCSS({removeAllComments: true}),
    cssdeclsort({
      order: 'alphabetically'
    })
    ]))
    .pipe(gulp.dest('./public_html/assets/non-critical-stylesheets')) // And write to disk.
    .pipe(browser.reload({stream: true}))
    .pipe(notify({"message": "Compiled <%= file.relative %>."}))
    done();
}

function cleancss(done) {
  return gulp
    .src("./public_html/assets/**/*.css")
    .pipe(plumber({
      errorHandler: onError
    })) // Don't stop for errors or completion
    .pipe(gulpPostcss([
      mergeRules(),
      minifyCSS({removeAllComments: true})
    ]))
    .pipe(gulp.dest('./public_html/assets')) // And write to disk.
    .pipe(browser.reload({stream: true}))
    .pipe(notify({"message": "Compiled <%= file.relative %>."}))
        done();
}

// Transpile, concatenate and minify scripts
function scripts(done) {
  return gulp
      .src([
      './src/assets/js/**/*.js'
      ]) // JS file source including any subfolders
      .pipe(plumber({
        errorHandler: onError
      })) // Don't stop for errors or completion
      .pipe(gulpif(argv.design,changed('./public_html/assets/js')))
      .pipe(sourcemaps.init({
        loadMaps: true
      }))
      .pipe(minify({
        ext: {
          src: '.js',
          min: '.min.js'
        },
        noSource: true
      })) // minify the JS
      .pipe(sourcemaps.write('./maps', {addComment: false}))
      .pipe(gulp.dest('./public_html/assets/js')) // And write to disk.
      .pipe(browser.reload({stream: true}))
      .pipe(notify({"message": "Compiled <%= file.relative %>."}))
      done();
}

function twig(done) {

  return gulp
      .src('./src/templates/**/*.twig')
      .pipe(plumber({
        errorHandler: onError
      }))
      .pipe(gulpif(argv.design,changed('./templates')))
      .pipe(cleanhtml())
      .pipe(htmlmin({ collapseWhitespace: true }))
      .pipe(gulp.dest('./templates'))
      .pipe(browser.reload({stream: true}))
      done();

}

function copyfonts(done) {

  return gulp
  .src('./src/assets/webfonts/**/*.{ttf,woff,woff2,eot,svg}')
  .pipe(gulp.dest('./public_html/assets/webfonts'))
  done();
}

// Watch files
function watchFiles() {
  gulp.watch("./src/assets/stylesheets/**/*.scss", css);
  gulp.watch("./src/templates/**/*.twig", twig);
  gulp.watch("./src/assets/js/**/*.js'", scripts);
  gulp.watch("./src/assets/images/**/*.{gif,jpg,jpeg,svg,png}", images);
}

// define complex tasks
const build = gulp.series(twig, gulp.parallel(css, images, scripts, copyfonts), splitcsscritical, splitcssrest);
const watcher = gulp.parallel(watchFiles, browserSync);
const splitcss = gulp.parallel(splitcsscritical,splitcssrest);

// export tasks
exports.images = images;
exports.css = css;
exports.scripts = scripts;
exports.twig = twig;
exports.build = build;
exports.watch = watcher;
exports.default = watcher;
exports.copyfonts = copyfonts;
exports.cleancss = cleancss;
exports.splitcss = splitcss;