npm package: @hugojosefson/merge-html
Description: CLI and module for merging 2+ .html files together.
Author: Hugo Josefson
Latest version: 3.0.0

# @hugojosefson/merge-html

[![Build Status](https://travis-ci.org/hugojosefson/merge-html.svg?branch=master)](https://travis-ci.org/hugojosefson/merge-html)
[![npm page](https://img.shields.io/npm/v/@hugojosefson/merge-html.svg)](https://npmjs.com/package/@hugojosefson/merge-html)
[![License MIT](https://img.shields.io/npm/l/@hugojosefson/merge-html.svg)](https://tldrlegal.com/license/mit-license)
[![SemVer 2.0.0](https://img.shields.io/badge/SemVer-2.0.0-lightgrey.svg)](https://semver.org/spec/v2.0.0.html)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 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](https://github.com/nvm-sh/nvm#readme):

```bash
nvm install stable
```

## Usage

```bash
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](https://www.npmjs.com/package/html-minifier-terser) with
[DEFAULT_MINIFY_OPTIONS](#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:

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

...or...

```bash
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.

```bash
yarn add @hugojosefson/merge-html
```

```js
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:

```html
<!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

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

#### merge

[src/merge.mjs:15-20](https://github.com/hugojosefson/merge-html/blob/ed7f703815e3ea0706a6da8e351882740c216325/src/merge.mjs#L15-L20 'Source code on GitHub')

Merges two or more HTML strings together.

##### Parameters

- `htmls`
  **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>**
  Array of HTML documents, each as a string.
- `minifyOptions`
  **([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
  \|
  [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))**
  Can be `true`, `false` or an object with options for
  [html-minifier-terser](https://www.npmjs.com/package/html-minifier-terser).
  (optional, default `DEFAULT_MINIFY_OPTIONS`)

Returns
**[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
The resulting HTML document.

#### DEFAULT_MINIFY_OPTIONS

[src/fn/minify.mjs:17-20](https://github.com/hugojosefson/merge-html/blob/ed7f703815e3ea0706a6da8e351882740c216325/src/fn/minify.mjs#L17-L20 'Source code on GitHub')

Default `minifyOptions` for `merge()`.