@hugojosefson/merge-html NPM

@hugojosefson/merge-html

Introduction

CLI and module for merging two or more .html files together.

Prerequisite

Node.js, v13.7.0 or higher, ideally at least v14.0.0.

Recommended to install latest via nvm:

nvm install stable

Usage

npx --package @hugojosefson/merge-html \
  merge-html input1.html input2.html [...inputN.html] \
  > output.html

Will merge all the input html files, and redirect the output to output.html.

Minification

By default, the output HTML is minified using html-minifier-terser with DEFAULT_MINIFY_OPTIONS.

You may change it by setting the MERGE_HTML_MINIFY environment variable to a boolean, or to a valid JSON object with configuration options. For example:

MERGE_HTML_MINIFY=false \
npx --package @hugojosefson/merge-html \
  merge-html input1.html input2.html > \
  non-minified.html

...or...

MERGE_HTML_MINIFY='{"decodeEntities": true, "keepClosingSlash": true, "maxLineLength": 80}' \
npx --package @hugojosefson/merge-html \
  merge-html input1.html input2.html > \
  special-minified.html

Programmatic access

You can also add the module to your project, import it, and use its default exported function programmatically.

yarn add @hugojosefson/merge-html

import merge from '@hugojosefson/merge-html'

const html1 = `
<html>
  <head>
    <title>Example</title>
    <script src="legacy.js" async nomodule></script>
  </head>
  <body>
    <p>Hello</p>`

const html2 = `
<html>
  <head>
    <title>Example</title>
    <script src="modern.mjs" type=module></script>
  </head>
  <body>
    <p>World</p>`

console.log(merge([html1, html2]))

The above example would output:

<!DOCTYPE html><html><head><title>Example</title><script src="legacy.js" async nomodule=""></script><script src="modern.mjs" type="module"></script></head><body><p>Hello</p><p>World</p></body></html>

... which when pretty-printed is:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="legacy.js" async nomodule=""></script>
    <script src="modern.mjs" type="module"></script>
  </head>
  <body>
    <p>Hello</p>
    <p>World</p>
  </body>
</html>

API

merge

src/merge.mjs:15-20

Merges two or more HTML strings together.

Parameters

htmls Array<string> Array of HTML documents, each as a string.
minifyOptions (boolean | Object) Can be true, false or an object with options for html-minifier-terser. (optional, default DEFAULT_MINIFY_OPTIONS)