@cpuchain/html-inline-external

v1.0.10

Published

4 months ago

Helps include/inline external Script/CSS/Images and compiles into a Single HTML page.

Downloads

0High
0Medium
0Low

html-inline-external html-inline html-inclue-external inline html files include html files include script in html include css in html inline script in html inline css in html

html-include-external-resources

Simple utility to inline external HTML resources from <script> <links /> <img /> into single HTML file.

npm

Features

Full Control over output configuration, Print to console 💻, Write to file 📁 or simply Copy to clipboard 📋 .
Converts and inlines 🖼 source into base64 string🤓.
Configurable html tags to be processed 🛠.
Node API

| Contents | | --- | | CLI Usage | | Node API Usage | | Recipies |

CLI Usage

npx html-inline-external --src index.html >> output.html

Input:

index.html

<html>
    <head>
        <script type="text/javascript" src="./index.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        Hello World
    </body>
</html>

index.js

alert("This is an alert!")

styles.css

body {
    background-color: black;
    color: white;
}

Output:

> npx html-inline-external --src ./index.html >> output.html

output.html

<html>
  <head>
    <script type="text/javascript">
      alert("This is an alert!")
    </script>
    <link rel="stylesheet" href="styles.css">
    <style>
      body {
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body>
    Hello World
  </body>
</html>

Options :

| Option | Default | Desscription | | --- | --- | --- | | src | N/A | Path to the source file | | dest | N/A | Path to the destination file | | tags | script, link, img | List HTML Tags to be processed in csv format | | copy | false | Copies the process output to clipboard | | pretty | false | Prettify output | | minify | false | Minify output |

Node API Usage

Install html-inline-external using your package manager

npm install html-inline-external --save

yarn add html-inline-external

Use it in your NodeJS file

htmlInlineExternal({options})

Example

const htmlInlineExternal = require('html-inline-external')

htmlInlineExternal({src: './test/index.html'}).then(output => console.log(output))

API Options :

| Option | Default | Desscription | | --- | --- | --- | | src | N/A | Path to the source file | | tags | script, link, img | List HTML Tags to be processed in csv format | | pretty | false | Prettify output | | minify | false | Minify output |

Recipies

Write output to file:

Uses node fs and writes the output into the given file path

> npx html-inline-external --src ./index.html --dest ./output.html

> [Log] Wrote to file output.html.

Copy processed output to clipboard:

Copies the processed output to clipboard, Could be accessed by simply hitting Ctrl/Cmd + V

> npx html-inline-external --src ./index.html --copy

> [Log]: Copied to clipboard.

Prettify processed output:

Prettifies the processed output

> npx html-inline-external --src ./index.html --pretty --dest ./output.html

> [Log] Wrote to file output.html

Minfy processed output:

Minifies the processed output to remove whitespaces

> npx html-inline-external --src ./index.html --minify --dest ./output.html

> [Log] Wrote to file output.html