hugulp

hugulp is a tool to optimize the assets of a Hugo website.

The main idea is to recreate the famous Ruby on Rails Asset Pipeline, which minifies, concatenates and fingerprints the assets used in your website.

This leads to less and smaller network requests to your page, improving overall user experience.

Read this blog post and this article for additional context.

It's internally driven by Gulp.

This project Includes the following tools, tasks and workflows:

BrowserSync
SASS (super fast libsass)
autoprefixer
ClearCss
Javascript Lint
Uglify
Image optimization (only changed images)
Asset Fingerprinting using gulp-rev and gulp-rev-replace

Installation

Node needs to be installed in your system.

Then just

$ npm install -g hugulp

Getting Started

hugulp requires you to create the following folders inside your hugo site:

assets/img
assets/styles
assets/scripts

For example

$ hugo new site website
$ cd website
$ mkdir -p assets/{img,styles,scripts}
# create content, add images, css/sass and javascript files to the corresponding folders>
$ hugulp build

It will use hugo's default config file: config.toml, but you can specify a different config via the -c, --config switch

$ hugulp build --config config.yaml

$ hugulp watch --config config.yaml

Available Commands

hugulp watch

It will do the following:

Convert sass to css, then minify the result (works on assets/styles/*.{css,scss})
Compress images (works on assets/images/*.*)
Minify javascript files (works on assets/scripts/*.js)
Fingerprint the optimized assets from the previous steps
Invoke hugo to generate the site

hugo will be invoked like this:

$ hugo --config=config.toml -s . -d ./public --buildDrafts=true --verbose=true --baseUrl="http://localhost:3000/"

Change all references to the assets in your content files (index.html, etc.)
Watch for changes to content files or assets to reload the browser

hugulp build

It runs the same pipeline as the hugulp build command, but hugo is invoked as follows:

$ hugo --config=config.toml -s . -d ./public"

Additionally, files are not watched for changes

How to update

Whenever a new hugulp version becomes available, you can update it by running

$ npm update -g hugulp

PR

Pull Requests are welcome 👍.

Made by Juan B. Rodriguez, with a MIT License.

Please share the article or leave your comments.

jaydreyer/hugulp