hugulp

hugulp is a Gulp-based asset pipeline tool for Hugo websites that minifies, concatenates, fingerprints, and optimizes static assets to reduce page load times.

What is hugulp?

hugulp is a command-line tool that runs an asset pipeline on the output of a Hugo static site build, internally driven by Gulp, to minify, concatenate, fingerprint, and optimize CSS, JavaScript, HTML, and images. It takes the static files generated by Hugo in the public folder and processes them in place; a watch mode also compiles Sass/Less and lints JavaScript during development. The tool was created by Juan B. Rodriguez and is released under the MIT License.

Key Features

• Asset pipeline — Recreates the Ruby on Rails Asset Pipeline with sequential tasks for images, styles, scripts, fingerprinting, and HTML minification.
• Pre-processing support — Compiles Sass and Less into CSS via gulp-sass and gulp-less, and lints JavaScript with jshint.
• Minification — Uses clean-css for CSS, uglify for JavaScript, htmlmin for HTML, and imagemin for images; only changed images are processed via gulp-changed.
• Fingerprinting — Appends content-based hashes to asset filenames using gulp-rev and rewrites references in HTML with gulp-rev-replace.
• Autoprefixer — Adds vendor prefixes to CSS, with the default browsers list set to "last 2 versions".
• Watch mode — hugulp watch monitors assets/styles and assets/scripts recursively and writes compiled output into Hugo's static folder.
• Configurable pipeline — The .hugulprc file lets you customize which tasks run, folder names, image optimization options (gifsicle, jpegtran, optipng, svgo), and minifier settings.
• Docker support — Includes scripts to create a Docker machine with specific Hugo and Node versions.

Who is it for?

• Hugo site developers who want an automated asset optimization step after hugo builds the site.
• Users comfortable with Node.js/npm who prefer a global CLI tool over writing a custom Gulp config.
• Teams wanting a Rails-like asset pipeline with fingerprinted, minified files and minimal manual configuration.

What can you do with hugulp?

• Optimize a production Hugo site: run hugo then hugulp build to minify CSS/JS/HTML, optimize images, and fingerprint assets in the public folder.
• Compile Sass/Less during development: run hugulp watch to auto-convert files from assets/styles into static/styles and lint JavaScript.
• Customize asset handling: edit .hugulprc to remove the fingerprint task, rename folders like styles to css, or adjust svgo and optipng settings.

How does hugulp work?

1. Install it globally with npm install -g hugulp.
2. Run hugulp init to create a default .hugulprc in your Hugo site.
3. Place CSS/JS/images in static/ or use assets/ for Sass/Less preprocessing.
4. Run hugo to generate the public folder, then hugulp build to run the pipeline.

Pros and cons

• Pros: Covers the full asset pipeline out of the box, is configurable through one JSON file, and offers a watch mode for preprocessing during development.
• Cons: The repository is deprecated and archived as of August 2021; it still runs on Gulp 3, has not been updated to Gulp 4, and adds a separate build step after Hugo.

Alternatives

• Hugo Pipes — the built-in asset pipeline in Hugo that natively covers much of hugulp's functionality, though image optimization still requires a custom pipe.

FAQ

Is hugulp free?

Yes, hugulp is open source under the MIT License and can be installed for free via npm.

Does hugulp work with Hugo themes?

Yes, version 2 added support for themes out of the box, so assets from themes are included in the pipeline.

Why was hugulp deprecated?

The author archived the repository in August 2021 because Hugo Pipes provides most of the same asset-processing features natively. Only image optimization is missing from Hugo Pipes, and the author suggests it can be built as a custom pipe.

Do I need to change my Hugo workflow?

You still use Hugo to build the site, but after that you run hugulp build to optimize the public folder. During development, you can use hugulp watch to compile Sass/Less and lint JavaScript automatically.