Skip to content

Instantly share code, notes, and snippets.

@tcg
Created February 14, 2018 05:09
Show Gist options
  • Save tcg/643c824803e10d2f1f266704263d077d to your computer and use it in GitHub Desktop.
Save tcg/643c824803e10d2f1f266704263d077d to your computer and use it in GitHub Desktop.
Gulpfile example that builds Hugo site, scss/css, asset hashing, and html minification
/**
* This gulpfile inspired by http://danbahrami.io/articles/building-a-production-website-with-hugo-and-gulp-js/
*
* Tasks for building sass/scss, and hashed assets, in combination with the
* hugo generated blog.
*
*/
var gulp = require("gulp"),
sass = require("gulp-sass"),
autoprefixer = require("gulp-autoprefixer"),
hash = require("gulp-hash"),
del = require("del")
htmlmin = require('gulp-htmlmin')
runSequence = require('run-sequence')
// For running a local machine task, `generate_gzips_public`:
var exec = require('child_process').exec;
// Compile SCSS files to CSS (hashed)
gulp.task("scss", function () {
del(["static/css/**/*"])
gulp.src("src/scss/**/*.scss")
.pipe(sass({outputStyle : "compressed"}))
.pipe(autoprefixer({browsers : ["last 20 versions"]}))
.pipe(hash())
.pipe(gulp.dest("static/css"))
//Create a hash map
.pipe(hash.manifest("hash.json"))
//Put the map in the data directory
.pipe(gulp.dest("data/css"))
})
// Hash images
gulp.task("images", function () {
del(["static/images/**/*"])
gulp.src("src/images/**/*")
.pipe(hash())
.pipe(gulp.dest("static/images"))
.pipe(hash.manifest("hash.json"))
.pipe(gulp.dest("data/images"))
})
// Hash javascript
gulp.task("js", function () {
del(["static/js/**/*"])
gulp.src("src/js/**/*")
.pipe(hash())
.pipe(gulp.dest("static/js"))
.pipe(hash.manifest("hash.json"))
.pipe(gulp.dest("data/js"))
})
// Watch asset folder for changes
// If you run `hugo serve`, it will see these changes, and you can
// still actively develop the site with auto reloading, etc.
gulp.task("watch", ["scss", "images", "js"], function () {
gulp.watch("src/scss/**/*", ["scss"])
gulp.watch("src/images/**/*", ["images"])
gulp.watch("src/js/**/*", ["js"])
})
// Minify all final html files IN PLACE.
// This is an optional step, after running `hugo` to generate the final build.
gulp.task('minifyhtml', function() {
return gulp.src('public/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('public'));
});
// "Pre-compress" site as gzip
// Run a local script that precompresses several file types, and puts them
// in place next to their original assets. Nginx handles this with some
// custom configuration.
// E.g., "index.html" gets a new sibling "index.html.gz", etc.
gulp.task('generate_gzips_public', function (cb) {
exec("./generate_precompressed_gzips_public.sh", function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
})
// Run default hugo build, deleting everything in 'public' first:
gulp.task('hugo_build', function (cb) {
exec("hugo --cleanDestinationDir", function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
})
// Run each step of build, synchronously (one after the other).
gulp.task("build", function() {
// In the future (gulp-4) we can do something like this:
// gulp.task('build', gulp.series('hugo_build', 'minifyhtml', 'generate_gzips_public', function(done) {
// done();
// }));
runSequence("hugo_build", "minifyhtml", "generate_gzips_public");
})
// Set `watch` as default task
gulp.task("default", ["watch"])
@tcg
Copy link
Author

tcg commented Feb 14, 2018

As you can see... I am no javascript wizard. I started with examples, and made things that worked. Clearly I need to activate the linter on this gulpfile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment