metalsmith-minify-css v1.0.1

metalsmith-minify-css

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

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

• CSS source files (files that end in the .css extension).
• Inline CSS in HTML files in the <style> tags.
• Inline CSS in HTML files in the style attributes on elements.

Under the hood, metalsmith-minify-css uses the jsdom library to manipulate the HTML files and the clean-css library to minify the CSS code.

Installation

npm install metalsmith-minify-css

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 minifyCss = require('metalsmith-minify-css');

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

JSON

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

Options

You can pass options to metalsmith-minify-css 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.
• cssPattern: optional. Only CSS source files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.css.
• cleanCssOptions: optional. Options used in the clean-css library to modify the CSS 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 minifyCss = require('metalsmith-minify-css');

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

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-css": {
      "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.

cssPattern

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

JavaScript

const Metalsmith = require('metalsmith');
const minifyCss = require('metalsmith-minify-css');

Metalsmith(__dirname)
  .use(minifyCss({
    cssPattern: 'blog/**/*.css',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

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

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

cleanCssOptions

Options used by the clean-css library to minify CSS code. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const minifyCss = require('metalsmith-minify-css');

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

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-minify-css": {
      "cleanCssOptions": {},
    }
  }
}

Would specify different options to be passes to the clean-css library when running the CSS minification.

License

AGPLv3