Created
February 14, 2018 05:09
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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"]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.