Gulp-minify-html-literals NPM

Gulp plugin for minifying HTML literals

npm Maintenance npm npm NodeJS npm

This plugin is a Gulp wrapper for minify-html-literals.

Minify HTML in your ES2015 (or later) string literals, e.g. when using polymer or lit-element or custom webcomponents or other JavaScript files that uses ECMASCRIPT string literals with HTML.

Getting started

npm i gulp-minify-html-literals

Example usage

Considering this source in ./my-widgets/BttgTestWidget.js:

class BttgTestWidget extends $.classes.Widget {

  constructor() {

    super();

    this.test = 'test';

  }

  template() {
    return html`
      <h1>Test 1</h1>
      <p>This is a ${this.test}.</p>
      <p>This HTML should be minified.</p>
      `;
  }

  render() {
    return this.template();
  }

  static get is() {
    return 'bttg-test-widget';
  }

}

$.classes.Widget.def(BttgTestWidget.is, BttgTestWidget);

you can minify both javascript and the template html when with this gulpfile.js:

const {
  src,
  dest,
  parallel,
  series
} = require('gulp');

const gulpMinifyJsTemplate = require('gulp-minify-html-literals');

const distWidgets = () =>
  src([`./my-widgets/**/*.js`])
  .pipe(minifyJSTemplate()) //or with options minifyJSTemplate({...})
  .pipe(dest('./dist/js/widgets/'));

module.exports = {

  default: distWidgets

};

For the actual options, see minify-html-literals.