Skip to content

Instantly share code, notes, and snippets.

@waako
Created June 15, 2017 03:46
Show Gist options
  • Save waako/7749acd10affac02782b6b0992ca83f8 to your computer and use it in GitHub Desktop.
Save waako/7749acd10affac02782b6b0992ca83f8 to your computer and use it in GitHub Desktop.
Gulp workflow for optimising and compressing static site html and assets.
/* 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']);
});
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment