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

Node needs to be installed in your system.

Then just

$ npm install -g hugulp

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

Or

$ hugulp watch --config config.yaml

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

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

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

$ npm update -g hugulp

Pull Requests are welcome 👍.

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

Please share the article or leave your comments.