gatsby-plugin-minify-html

    1.0.4 • Public • Published

    gatsby-plugin-minify-html

    Travis NPM version Downloads Issues

    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

    Install with yarn:

    yarn add gatsby-plugin-minify-html

    Or install with npm:

    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:

    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 make sure that it’s listed after this plugin:

    // 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, 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:

    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.

    Example

    gatsby-config.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:

    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.

    License

    Licensed under MIT.

    Install

    npm i gatsby-plugin-minify-html

    DownloadsWeekly Downloads

    1,512

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • illvart