Skip to content

Helps you include external resource and compiles into a Single HTML page.

License

Notifications You must be signed in to change notification settings

okrohan/html-inline-external

Repository files navigation

html-include-external-resources

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

npm PRs Welcome

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 

OR

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 

About

Helps you include external resource and compiles into a Single HTML page.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •