metalsmith-minify-js v1.0.0

metalsmith-minify-js

A metalsmith plugin for minifying JS in HTML files and JS source files.

This plugin minifies the JS code in all of the HTML files and JS sources files. The JS code minifier is run multiple times to minify the JS code in the following file locations:

• JS source files (files that end in the .js extension).
• Inline JS in HTML files in the <script> tags.
• Inline JS in HTML files in the on* attributes on elements.

Under the hood, metalsmith-minify-js uses the jsdom library to manipulate the HTML files and the terser library to minify the JS code.

Installation

npm install metalsmith-minify-js

Usage

To use this plugin, simply add it to the existing plugins in your Metalsmith source file or include it in the Metalsmith JSON file:

JavaScript

const Metalsmith = require('metalsmith');
const minifyJs = require('metalsmith-minify-js');

Metalsmith(__dirname)
  .use(minifyJs())
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "plugins": {
    "metalsmith-minify-js": {}
  }
}

Options

You can pass options to metalsmith-minify-js with the Javascript API or CLI. The options are:

• htmlPattern: optional. Only HTML files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.html.
• jsPattern: optional. Only JS source files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.js.
• terserOptions: optional. Options used in the terser library to modify the JS minification process. Accepts and object. The default is {}.

htmlPattern

Only HTML files that match this pattern will be processed for inline style minification. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyJs = require('metalsmith-minify-js');

Metalsmith(__dirname)
  .use(minifyJs({
    htmlPattern: 'blog/**/*.html',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-js": {
      "htmlPattern": "blog/**/*.html"
    }
  }
}

Would only process HTML files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

jsPattern

Only JS files that match this pattern will be processed for JS source code minification. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyJs = require('metalsmith-minify-js');

Metalsmith(__dirname)
  .use(minifyJs({
    jsPattern: 'blog/**/*.js',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-js": {
      "jsPattern": "blog/**/*.js"
    }
  }
}

Would only process JS files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

terserOptions

Options used by the terser library to minify JS code. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyJs = require('metalsmith-minify-js');

Metalsmith(__dirname)
  .use(minifyJs({
    terserOptions: {},
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-js": {
      "terserOptions": {},
    }
  }
}

Would specify different options to be passes to the terser library when running the JS minification.

License

AGPLv3