hugulp is a starter project for Hugo + Gulp.
It combines Hugo's fast static site generation with Gulp's flexibility to manage an asset pipeline and control the build process.
Read this article, for additional context.
Includes the following tools, tasks and workflows:
- BrowserSync
- SASS (super fast libsass)
- autoprefixer
- MinifyCss
- Javascript Lint
- Uglify
- Image optimization (only changed images)
- Asset Fingerprinting using gulp-rev and gulp-rev-replace
If Hugo is already installed, copy the folders in its current location to the hugo folder of this project.
Also, copy the following folders:
- hugo/static/img to src/img
- hugo/static/css to src/styles
- hugo/static/js to src/scripts
- any svg files to src/svg
If Node is already installed, no further action is required.
$ npm install
This runs through all dependencies listed in package.json and downloads them to a node_modules folder in your project directory.
Run the default gulp task with
$ gulp
It will do the following:
- The styles, scripts and images tasks get executed first to do the heavy lifting of compressing images and minifying css/js files.
- The revision task runs next to fingerprint the optimized assets.
- Then the hugo:all task is invoked to generate the static site
hugo will run as if invoked like this:
$ hugo --config=./hugo/config.yaml -s ./hugo -d ./public --buildDrafts=true --verbose=true --baseUrl="http://localhost:3000/"
- The reference:all task replaces all asset ocurrences with their fingerprinted versions
- Finally, the browser is reloaded so that you can very quickly check the changes you made
There's also a publish task you can run:
$ gulp publish
It will perform all the steps above, but Hugo will be run with as follows:
$ hugo --config=./hugo/config.yaml -s ./hugo -d ./public"
For changes, send a PR.
Made by Juan B. Rodriguez, with a MIT License.