Gulp workflow for optimising and compressing static site html and assets.

gulpfile.js

/* Load plugins */
var gulp = require('gulp'),
    watch = require('gulp-watch'),
    notify = require('gulp-notify'),
    uncss = require('gulp-uncss'),
    zopfli = require("gulp-zopfli"),
    connect = require('gulp-connect'),
    htmlmin = require('gulp-htmlmin'),
    inlinesource = require('gulp-inline-source'),
    imagemin = require('gulp-imagemin'),
    jpgtran = require('imagemin-jpegtran');
    image = require('gulp-image');


gulp.task('connectBuild', function() {
    connect.server({
        root: 'build',
        port: 8000,
        livereload: true
    });
});
gulp.task('connectPublic', function() {
    connect.server({
        root: 'public',
        port: 8001
    });
});

gulp.task('css', function() {
    return gulp.src('src/css/*.css')
        .pipe( gulp.dest('build/css') )
        .pipe( connect.reload() )
        .pipe( notify('CSS task complete!') )
});

gulp.task('html', function() {
    return gulp.src('src/*.html')
        .pipe( connect.reload() )
        .pipe( gulp.dest('build') )
});


gulp.task('uncss', function() {
    return gulp.src('build/css/*.css')
        .pipe( uncss({ html: ['build/*.html'] }) )
        .pipe( gulp.dest('build/css') )
});

gulp.task('minify', function() {
    var options = {
      compress: true,
    };
    return gulp.src('./build/*.html')
        .pipe( inlinesource(options) )
        .pipe( htmlmin({collapseWhitespace: true, caseSensitive: true, minifyCSS: true, removeComments: true}) )
        .pipe( gulp.dest('./public') )
});

gulp.task('compress', function() {
    return gulp.src('public/*.html')
        .pipe( zopfli() )
        .pipe( gulp.dest('public') )
});

/**
 * Minify PNG, JPEG, GIF and SVG images
*/
gulp.task('image-min', () =>
    gulp.src('src/img/*.jpg')
        .pipe(imagemin({
          progressive: true,
          use: [jpgtran()]
      }))
        .pipe(gulp.dest('public/img'))
);
/* Gulp Image is much more effective */
gulp.task('image', function () {
  gulp.src('src/img/*')
    .pipe(image())
    .pipe(gulp.dest('public/img'));
});

/* Default task */
gulp.task('default', ['connectBuild', 'watch'], function() {
    gulp.start('css', 'html');
});

/* Deploy task */
gulp.task('deploy', ['connectPublic'], function() {
    gulp.start('uncss', 'minify', 'compress');
});

/* Watch task */
gulp.task('watch', function() {
    gulp.watch('src/css/*.css', ['css']);
    gulp.watch('src/*.html', ['html']);
});

package.json

{
  "name": "static-site-optimisation",
  "version": "1.0.0",
  "description": "Static html build workflow for optimisation",
  "main": "gulpfile.js",
  "author": "Tom Bamford",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-image": "^2.8.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-inline-source": "^3.0.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-notify": "^3.0.0",
    "gulp-responsive": "^2.7.0",
    "gulp-smoosher": "0.0.9",
    "gulp-uncss": "^1.0.6",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "gulp-zopfli": "^1.0.0",
    "imagemin-jpegtran": "^5.0.2",
    "inline-source": "^5.2.0"
  },
  "dependencies": {
    "critical": "^0.8.3"
  }
}