node package manager

hugulp

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:

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

Or

$ hugulp watch --config config.yaml

Available Commands

hugulp watch

It will do the following:

  • Process files based on their location, according to the following table
In Folder Looks for Operation
assets/styles scss, less, css Convert sass/less to css, then minify the result
assets/img * Compress changed images
assets/scripts js Minify javascript code

Note: It searches the folders recursively

  • Fingerprint the optimized assets from the previous step
  • 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

hugulp version

Display installed version

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 👍.

Share

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

Please share the article or leave your comments.