Integrating HTMLMinifier with 11ty

11ty transforms Markdown to HTML by template, not minimizes HTML. We have to use HTMLMinifier to optimize the HTML page.

Version

11ty 0.12.1
HTMLMinifier 4.0.0

Create Folder

$ mkdir 11ty-htmlminifier

Create a folder for the 11ty project.

minifier010

Add HTMLMinifier

$ yarn init -y
$ yarn add @11ty/eleventy html-minifier --dev

Use Yarn to add related packages :

@11ty/eleventy : for 11ty
html-minifier : minimize HTML under production mode

minifier000

11ty Config

.eleventy.js

let htmlMinifier = require ('html-minifier')

module.exports = config => {
  config.addTransform ('htmlMinifier', content => {
    if (process.env.NODE_ENV === 'production') {
      return htmlMinifier.minify (content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
      })
    }
    return content
  })

  return {
    htmlTemplateEngine: 'njk',
    dir: {
      input: 'src',
      output: 'dist',
      includes: 'template',
    }
  }
}

Line 4

config.addTransform ('htmlMinifier', content => {
  if (process.env.NODE_ENV === 'production') {
    return htmlMinifier.minify (content, {
      useShortDoctype: true,
      removeComments: true,
      collapseWhitespace: true,
    })
  }
  return content
})

config.addTransform : modify the template’s output
Call HTMLMinifier to optimize HTML page under production mode

Line 15

return {
  htmlTemplateEngine: 'njk',
  dir: {
    input: 'src',
    output: 'dist',
    includes: 'template',
  }
}

Define 11ty setting :

htmlTemplateEngine : use Numjucks as the default template engine
dir : user-defined directory
- input : define markdown directory
- output : define build directory
- includes : define template directory under input directory

minifier001

Template

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello 11ty</title>
</head>
<body>
  <div>Hello HTMLMinifier</div>
</body>
</html>

Normal HTML page.

minifier009

NPM Config

package.json

{
  "name": "11ty-lab",
  "version": "1.0.0",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "NODE_ENV=production eleventy"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "html-minifier": "^4.0.0"
  }
}