Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/illvart/gatsby-plugin-minify-html
:rocket: A Gatsby plugin for minify HTML files.
https://github.com/illvart/gatsby-plugin-minify-html
es6 gatsby gatsby-plugin gatsbyjs html html-minifier minify minify-html minify-html-plugin optimize terser
Last synced: 3 months ago
JSON representation
:rocket: A Gatsby plugin for minify HTML files.
- Host: GitHub
- URL: https://github.com/illvart/gatsby-plugin-minify-html
- Owner: illvart
- License: mit
- Created: 2020-02-06T23:07:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T00:24:58.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T15:59:51.788Z (4 months ago)
- Topics: es6, gatsby, gatsby-plugin, gatsbyjs, html, html-minifier, minify, minify-html, minify-html-plugin, optimize, terser
- Language: JavaScript
- Homepage: https://npm.im/gatsby-plugin-minify-html
- Size: 85.9 KB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# gatsby-plugin-minify-html
[](https://travis-ci.com/illvart/gatsby-plugin-minify-html)
[](https://www.npmjs.org/package/gatsby-plugin-minify-html)
[](https://www.npmjs.com/package/gatsby-plugin-minify-html)
[](https://github.com/illvart/gatsby-plugin-minify-html)
> A Gatsby plugin for **minify HTML** files.
With this plugin, you can minify each HTML files (`.html`) at `public` directory.
_NOTE: This plugin only generates output when run in `production` mode! To test your minify HTML, run: `gatsby build && gatsby serve`._
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [Example](#example)
- [Contributing](#contributing)
- [License](#license)
## Installation
Install with yarn:
```sh
yarn add gatsby-plugin-minify-html
```
Or install with npm:
```sh
npm install --save gatsby-plugin-minify-html
```
## Usage
After installing `gatsby-plugin-minify-html` you can add it to the `plugins` array in your `gatsby-config.js` file:
```js
module.exports = {
plugins: ['gatsby-plugin-minify-html']
};
```
Note: if you are using `gatsby-plugin-brotli`, `gatsby-plugin-zopfli`, or other plugins look like used the **Gatsby Node APIs** [`onPostBuild`](https://www.gatsbyjs.org/docs/node-apis/#onPostBuild) make sure that it’s listed after this
plugin:
```js
// good
module.exports = {
plugins: [
'gatsby-plugin-minify-html',
'gatsby-plugin-brotli'
]
};
// bad
module.exports = {
plugins: [
'gatsby-plugin-brotli', // should be placed after 'gatsby-plugin-minify-html'
'gatsby-plugin-minify-html'
]
};
```
### Options
This plugin uses [`html-minifier-terser`](https://github.com/terser/html-minifier-terser), to use `html-minifier-terser` options put the options at `config: { }`.
You can see the options of `html-minifier-terser` are enabled default by this plugin in the [minify-html-plugin.js](https://github.com/illvart/gatsby-plugin-minify-html/blob/master/src/minify-html-plugin.js#L10):
| Name | Type | Default | Description |
| :-----------------------------: | :-------: | :-----: | :--------------------------------------------------------------------------------------------------: |
| `collapseWhitespace` | `Boolean` | `true` | Collapse white space that contributes to text nodes in a document tree |
| `minifyCSS` | `Boolean` | `true` | Minify CSS in style elements and style attributes |
| `minifyJS` | `Boolean` | `true` | Minify JavaScript in script elements and event attributes |
| `removeComments` | `Boolean` | `true` | Strip HTML comments |
| `removeScriptTypeAttributes` | `Boolean` | `true` | Remove `type="text/javascript"` from `script` tags. Other `type` attribute values are left intact |
| `removeStyleLinkTypeAttributes` | `Boolean` | `true` | Remove `type="text/css"` from `style` and `link` tags. Other `type` attribute values are left intact |
See all options `html-minifier-terser` at [Options Quick Reference](https://github.com/terser/html-minifier-terser#options-quick-reference).
#### Example
`gatsby-config.js`
```js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-minify-html',
options: {
debug: true, // debug optional, default false
config: {
// Enabled default by this plugin
collapseWhitespace: false,
minifyCSS: false,
minifyJS: false,
removeComments: false,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
// Disabled default by html-minifier-terser
sortAttributes: true,
useShortDoctype: true
}
}
}
]
};
```
When option `debug: true` you can see a generate logs, example logs:
```sh
Minify HTML files at public directory, total HTML files 7:
public/404/index.html > reduced 0.20%.
public/index.html > reduced 0.19%.
...
```
## Contributing
If you would like to help out with some code, check the [details](https://github.com/illvart/gatsby-plugin-minify-html/blob/master/docs/CONTRIBUTING.md).
## License
Licensed under [MIT](https://github.com/illvart/gatsby-plugin-minify-html/blob/master/LICENSE).