├── .gitignore ├── manifest.yml ├── package.json ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .netlify 3 | -------------------------------------------------------------------------------- /manifest.yml: -------------------------------------------------------------------------------- 1 | name: netlify-plugin-minify-html 2 | inputs: 3 | - name: contexts 4 | default: 5 | - production 6 | - branch-deploy 7 | - deploy-preview 8 | - name: minifierOptions 9 | required: false 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netlify-plugin-minify-html", 3 | "version": "0.3.1", 4 | "description": "A plugin to add HTML minification as a post-processing optimisation in Netlify", 5 | "main": "index.js", 6 | "keywords": [ 7 | "Netlify", 8 | "Plugin", 9 | "Optimisation", 10 | "Performance" 11 | ], 12 | "author": "Phil Hawksworth", 13 | "license": "ISC", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/philhawksworth/netlify-plugin-minify-html" 17 | }, 18 | "dependencies": { 19 | "@node-minify/core": "^9.0.2", 20 | "@node-minify/html-minifier": "^9.0.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const comp = require('@node-minify/core'); 2 | const htmlMinifier = require('@node-minify/html-minifier'); 3 | 4 | 5 | module.exports = { 6 | 7 | onPostBuild: async ({ inputs, constants, utils }) => { 8 | 9 | // Only continue in the selected deploy contexts 10 | if( !inputs.contexts.includes(process.env.CONTEXT) ) { 11 | console.log('Not minifiying HTML in the context:', process.env.CONTEXT); 12 | return; 13 | } 14 | 15 | // Minify HTML 16 | console.log('Minifiying HTML in the deploy context:', process.env.CONTEXT); 17 | const options = { 18 | collapseWhitespace: false, 19 | ...inputs.minifierOptions 20 | }; 21 | console.log('Minifiying HTML with these options:', options || "Default"); 22 | 23 | try { 24 | const compResult = await comp({ 25 | compressor: htmlMinifier, 26 | input: constants.PUBLISH_DIR + '/**/*.html', 27 | output: '$1.html', 28 | replaceInPlace: true, 29 | options 30 | }); 31 | console.log('Minifiying HTML complete'); 32 | 33 | } catch (error) { 34 | utils.build.failPlugin('The Minify HTML plugin failed.', { error }) 35 | } 36 | 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Netlify Plugin - Minify HTML 2 | 3 | This [plugin](https://www.netlify.com/build/plugins-beta?utm_source=github&utm_medium=plugin-htmlminifier-pnh&utm_campaign=devex) adds the ability to minify the HTML generated by your build. 4 | 5 | Note: Many SSGs support this as part of their own process so this might not always be necessary. 6 | 7 | This plugin is agnostic to the tool being used to generate the markup, and acts purely on the markup it finds in `.html` files in the publish folder which [Netlify](https://www.netlify.com?utm_source=github&utm_medium=plugin-htmlminifier-pnh&utm_campaign=devex) is preparing to deploy to [its CDN](https://www.netlify.com/products/edge/?utm_source=github&utm_medium=pluginhtmlminifier-pnh&utm_campaign=devex) following a successful build. 8 | 9 | ## Installation 10 | 11 | To include this plugin in your site deployment, use the Netlify UI or file-based installation: 12 | 13 | ### UI installation 14 | 15 | You can install this plugin in the Netlify UI from this [direct in-app installation link](https://app.netlify.com/plugins/netlify-plugin-minify-html/install) or from the [Plugins directory](https://app.netlify.com/plugins). 16 | 17 | ### File-based installation 18 | 19 | #### 1. Add the plugin as a dependency 20 | 21 | ```bash 22 | 23 | # Add the plugin as a dependency of your build 24 | npm i -D netlify-plugin-minify-html 25 | 26 | ``` 27 | 28 | 29 | #### 2. Add the plugin and its options to your netlify.toml 30 | 31 | You can choose which [deploy contexts](https://docs.netlify.com/site-deploys/overview/?utm_source=github&utm_medium=plugin-htmlminfier-pnh&utm_campaign=devex#deploy-contexts) will include the HTML minification with the `targets` option. 32 | 33 | You can use the default options for the minification or use `[plugins.inputs.minifierOptions]` to pass options to the minifier. A full list of the [available options](https://www.npmjs.com/package/html-minifier#options-quick-reference) are available from the [html-minfier library](https://www.npmjs.com/package/html-minifier) 34 | 35 | ```toml 36 | 37 | # Config for the Netlify Build Plugin: netlify-plugin-minify-html 38 | [[plugins]] 39 | package = "netlify-plugin-minify-html" 40 | 41 | # Specify which deploy contexts we'll minify HTML in. 42 | # Supports any Deploy Contexts available in Netlify. 43 | # https://docs.netlify.com/site-deploys/overview/#deploy-contexts 44 | [plugins.inputs] 45 | contexts = [ 46 | 'production', 47 | 'branch-deploy', 48 | 'deploy-preview' 49 | ] 50 | 51 | # Optionally, override the default options for the minification 52 | # https://github.com/kangax/html-minifier#options-quick-reference 53 | [plugins.inputs.minifierOptions] 54 | removeComments = false 55 | collapseInlineTagWhitespace = false 56 | 57 | ``` 58 | 59 | ## Quick try-out 60 | 61 | You can try out this plugin by deploying [a simple site](https://test-plugin-html-minifer.netlify.app/) which uses it. 62 | 63 | Clicking the button below will clone [a test site repo](https://github.com/philhawksworth/test-site-netlify-plugin-minify-html), setup a new site [on Netlify](https://netlify.com?utm_source=github&utm_medium=plugin-htmlminifier-pnh&utm_campaign=devex) and deploy the site complete with the plugin configured and operational. 64 | 65 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/philhawksworth/test-site-netlify-plugin-minify-html&utm_source=github&utm_medium=plugin-htmlminifier-pnh&utm_campaign=devex) 66 | --------------------------------------------------------------------------------