Html-inline-external-without-cdn NPM

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

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

clipboardy html-minifier jsdom pretty yargs

@everything-registry/sub-chunk-1867 @infinitebrahmanuniverse/nolb-html-i

1.0.10

1 year ago