Gulpfile.js optimization and image caching

I'm trying to write gulpfile.js, which will follow modern best practices for optimization. This project includes jekyll, SASS and some image optimization tasks. I'm pretty new to JavaScript and Gulp, so I'd love to get some feedback on this code.

You can also check the Github repo.

```
'use strict';

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
size = require('gulp-size'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cmq = require('gulp-combine-media-queries'),
minifyCSS = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
psi = require('psi'),
ngrok = require('ngrok'),
cp = require('child_process'),
browserSync = require('browser-sync'),
imageMin = require('gulp-imagemin'),
cwebp = require('gulp-cwebp'),
imageResize = require('gulp-image-resize'),
cache = require('gulp-cache'),
cached = require('gulp-cached'),
changed = require('gulp-changed'),
newer = require('gulp-newer'),
parallel = require('concurrent-transform'),
os = require('os-utils'),
minifyHTML = require('gulp-minify-html'),
clean = require('gulp-clean'),
url = 'http://1ec934f4.ngrok.com/',
reload = browserSync.reload;

var onError = function(err) {
gutil.beep();
gutil.log(gutil.colors.green(err + '\n'));
};

var messages = {
jekyllBuild: 'Running: $ jekyll build'
};

/========== Paths ==========/

var paths = {
styles: {
src: 'assets/sass/main.scss',
des

My only opinion on your mostly well written Gulpfile is to consider restructuring your 330+ line Gulpfile into multiple files, separated by grouped tasks.

During an overview of your file, the tasks seemed to be loosely categorized into three groups:

• image modifications

• copying / Jekyll

• JavaScript and Sass

As someone who doesn't like large files of code, I would suggest a build/ directory and a main Gulpfile.js to run your builds. Something along the following tree:

/Gulpfile.js
/build/images.js
/build/statics.js
/build/js-sass.js

This StackOverflow question handles the "how to" very nicely. Besides that tip (and some indentation errors), I think the Gulpfile looks great.

StackExchange Code Review Q#68044, answer score: 3