If you're using hugulp v1, please take note of the following changes:
hugo is no longer invoked by hugulp
use hugo as per its docs, then invoke hugulp build
put your assets in the static folder
for example, static/styles, static/images, static/scripts
themes are supported out of the box
Note: If you need sass/less/js pre-processing, read v2 docs below
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.
Note: These articles refer to v1
It's internally driven by Gulp.
This project Includes the following tools, tasks and workflows:
Node needs to be installed in your system.
$ npm install -g hugulp
Or you can build and run using docker:
# Default docker setup:$ ./scripts/create-docker-machine-and-run-it# -- OR --# Run with custom machine name, specific hugo version, specific node version and run docker in detached mode:$ ./scripts/create-docker-machine-and-run-it -a app-devel -g 0.20.6 -n 6.10.0 -d
Note: You only run the
./scripts/create-docker-machine-and-run-it if you want to create a new docker machine. Once the docker machine is created, you have to use docker commands to manage it. Please be familiar with docker in this regard.
The most common usage scenario would be:
Another scenario would be to include sass/less pre-processing:
In both cases, you could chain the last 3 commands:
$ rm -rf public && hugo && hugulp build
hugulp requires a configuration file (
.hugulprc), which is created by the
hugulp init command (you can create the file manually if you want).
This is the default
You can easily customize
hugulp's behavior, by modifying this configuration file, as described below.
It will watch for changes to styles or script files, process them and write them to hugo's static folder, according to the following table
|In Folder||Looks for||Operation||Written to|
|assets/styles||s[a|c]ss, less, css||Convert sass/less to css||static/styles|
Note: It searches the folders recursively
The table above applies to
hugulp run with a default
You can customize the folder names:
resources instead of
js instead of
scripts and so on.
This is described in the
.hugulprc section below.
It optimizes the site that hugo built, by running the asset pipeline as defined in
.hugulprc (field pipeline).
Additionally, files are not watched for changes
Display installed version.
Create a default
By editing the
.hugulprc configuration file, you can customize almost anything about
Description of each field follows:
Defines which tasks of the asset pipeline will be executed (
hugulp build command)
|images||minify images with
|html||minify html with
Let's say you don't want to fingerprint the assets. Just set pipeline to
By removing the fingerprint task, it will not be executed.
Note that tasks are executed sequentially.
Defines the name of the folders where your assets are located/will be transferred to.
So if you prefer your styles folder to be called css, and scripts to be called js, you would change it to:
Define which folders to watch for changes, for the
hugulp watch command.
This field works together with the path field.
With a default
.hugulprc, it will watch
If you customized
path as per above, it will watch
If you additionally want the
assets folder to be called
resources, change source to
then it will watch
Finally, the changes will be written to the well-known hugo static folder.
With a default
.hugulprc, files will be written to
Defines the folders referenced during the
hugulp build command
This should generally be left unchanged.
hugo will output to the public folder by default, so
hugulp build will process the files in-place.
autoprefixer. Check gulp-autoprefixer for documentation.
clean-css. Check gulp-clean-css for documentation.
htmlmin. Check gulp-htmlmin for documentation.
gifsicle. Check gulp-imagemin for documentation.
jpegtran. Check gulp-imagemin for documentation.
optipng. Check gulp-imagemin for documentation.
svgo. Check gulp-imagemin for documentation.
Whenever a new
hugulp version becomes available, you can update it by running
$ npm install -g hugulp
Pull Requests are welcome 👍.
Made by Juan B. Rodriguez, with a MIT License.