Minify Files in Metalsmith

Christian Emmer

Mar 26, 2020 · 4 min read

Minified files maintain all the functionality of their original source but optimize for size, which in turns means faster page loads and improved SEO - and it's a snap to do in Metalsmith.

See "Remove Unused Assets in Metalsmith" on removing unused assets entirely.

Remove Unused Assets in Metalsmith

May 19, 2020 · 4 min read

Have assets in your source directory that are never used by your output? Save some space, get rid of them!

Project setup

To keep this article short and to the point we're not going to set up a full website, just enough to show sample usage. See "Starting a Metalsmith Project" for a more complete article on how to set up a Metalsmith project.

Starting a Metalsmith Project

Sep 19, 2019 · 14 min read

Metalsmith is a plugin-based static site generator originally from Segment. It's a current favorite of mine because of how sites are built as a pipeline of plugins where the output of each plugin is the input of the next. This allows for strong control over what happens and when it happens.

Installing packages

Starting with an empty project, install some Metalsmith packages:

● ● ●

shell

$ npm install --save metalsmith metalsmith-uglify metalsmith-css-unused metalsmith-clean-css metalsmith-renamer metalsmith-html-minifier

metalsmith for the base project.
metalsmith-uglify to minify JavaScript files.
metalsmith-css-unused to remove unused CSS rules.
metalsmith-clean-css to minify CSS files.
metalsmith-renamer to rename minified CSS files.
metalsmith-html-minifier to minify HTML files.

Source file structure

Create the following directories and files for use in the build pipeline:

text



1.
2├── index.js
3└── src
4    ├── index.html
5    └── static
6        ├── css
7        │   └── styles.css
8        └── js
9            └── scripts.js

The names of the files aren't important as all HTML, CSS, and JavaScript files will be minified.

Fill in those files with some dummy content such as:

html



1<!-- src/index.html -->
2

3<!DOCTYPE html>
4<html lang="en">
5</html>

css



1/* src/static/css/styles.css */
2

3body {
4    background: white;
5}

javascript



1// src/static/js/scripts.js
2

3console.log('foo');
4console.log('bar');

Writing the source files

Set up your index.js file like this:

javascript



1const Metalsmith   = require('metalsmith');
2const uglify       = require('metalsmith-uglify');
3const cssUnused    = require('metalsmith-css-unused');
4const cleanCSS     = require('metalsmith-clean-css');
5const renamer      = require('metalsmith-renamer');
6const htmlMinifier = require('metalsmith-html-minifier');
7

8Metalsmith(__dirname)
9    .source('./src')         // source directory for the pipeline
10    .use(uglify({            // minify JavaScript files
11        removeOriginal: true,
12        uglify: {
13            sourceMap: false
14        }
15    }))
16    .use(cssUnused())        // remove unused CSS rules and combine files
17    .use(cleanCSS({          // minify CSS files
18        cleanCSS: {
19            rebase: false
20        }
21    }))
22    .use(renamer({           // rename minified CSS files
23        css: {
24            pattern: '**/*.css',
25            rename: file => file.replace(/\.css$/, '.min.css')
26        }
27    }))
28    .use(htmlMinifier({      // minify HTML files
29        minifierOptions: {
30            // Fix metalsmith-html-minifier defaults
31            removeAttributeQuotes: false,
32            // Additional minification rules
33            minifyCSS: true,
34            minifyJS: true,
35            quoteCharacter: '"',
36            removeScriptTypeAttributes: true,
37            removeStyleLinkTypeAttributes: true
38        }
39    }))
40    .destination('./build')  // destination directory of the pipeline
41    .clean(true)             // clean the destination directory before build
42    .build(function (err) {  // execute the build
43        if (err) {
44            throw err;
45        }
46    });

This will (in order):

Minify all /.js$/ (and not /.min.js$/) JavaScript files and change their extension to .min.js.
Remove unused CSS rules from all **/*.css files, based on the contents of all **/*.html HTML files.
Minify static/css/styles.css in-place without rebasing URLs.
Change the extension of all **/*.css (just static/css/styles.css) to .min.css.
Minify all **/*.html files in-place, including in-line CSS and JavaScript.
Copy src/index.html to build/index.html.