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)
- Less
- autoprefixer
- ClearCss
- Javascript Lint
- gulp-watch
- 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:
- 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
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
Display installed version
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.