Original photo by Markus Spiske

Compile and compress static websites for production using Gulp

A blunt tutorial

YMMV: The code below is given for the environment and use-case I had at the time of writing, adapt it for your requirements.

Workflow

• SCSS to CSS compilation
• Concatenate, minify and compress CSS files with sourcemaps
• Concatenate, minify and compress JS files with sourcemaps
• Minify and compress HTML files

Additional features:

• Provide a faster “watch” version for each build step used for local development
• Log compression rates for production build

Gulp build

This Gulp build is part of a deployment workflow for static websites to Digital Ocean that I have described in a previous post. An extract of the gulpfile.js is provided below.