Merging JS/CSS/HTML into single HTML

Question

I have a small local web-application of 2 HTML files, 6 CSS files and 11 JS files.

1. Would the web-application still work if all of these files were (properly) copy-pasted in a single HTML file, e.g. putting the JS in <script> tags in the header, and putting the CSS in <style> tags?

2. Does anyone know of a tool that could automatically and safely merge a collection of JS, CSS and HTML files into a single HTML?

Searching online, I only found tools that can combine or minify files of one type at a time, but not create the merged HTML file (e.g. AIOM+, HTMLcompressor. I did find this application called Inliner, but it seems it runs on Node.js, with which I'm not familiar and don't currently use.

In short, I'm looking for either a simple standalone tool that could read all the linked files in the HTML, and rewrite the HTML by appending those files' content. If that's asking too much, then just a confirmation that manually doing the job would result in a working file, or any tips to think about when doing so. Thanks!

Answer 1

I wrote a simple python script for it.

This is my tree:

root-folder
├── index.html
├── build_dist.py
├── js
│   └── somescript.js
├── css
│   ├── styles1.css
│   └── styles2.css
└── dist

I run the script:

cd root-folder
python build_dist.py

And a oneindex.html file is created in the dist folder.
This file contains all the js and css from the files specified with link and script tags in index.html.
You can use this file anywhere.

Note:

1. The HTML file must be "index.html" in the root folder.
2. It only works for a single HTML file. I don't know what you want to do with multiple HTML files.

---

build_dist.py code:

# build_dist.py

from bs4 import BeautifulSoup
from pathlib import Path
import base64

original_html_text = Path('index.html').read_text(encoding="utf-8")
soup = BeautifulSoup(original_html_text)

# Find link tags. example: <link rel="stylesheet" href="css/somestyle.css">
for tag in soup.find_all('link', href=True):
    if tag.has_attr('href'):
        file_text = Path(tag['href']).read_text(encoding="utf-8")

        # remove the tag from soup
        tag.extract()

        # insert style element
        new_style = soup.new_tag('style')
        new_style.string = file_text
        soup.html.head.append(new_style)


# Find script tags. example: <script src="js/somescript.js"></script>
for tag in soup.find_all('script', src=True):
    if tag.has_attr('src'):
        file_text = Path(tag['src']).read_text()

        # remove the tag from soup
        tag.extract()

        # insert script element
        new_script = soup.new_tag('script')
        new_script.string = file_text
        soup.html.body.append(new_script)

# Find image tags.
for tag in soup.find_all('img', src=True):
    if tag.has_attr('src'):
        file_content = Path(tag['src']).read_bytes()

        # replace filename with base64 of the content of the file
        base64_file_content = base64.b64encode(file_content)
        tag['src'] = "data:image/png;base64, {}".format(base64_file_content.decode('ascii'))

# Save onefile
with open("dist/oneindex.html", "w", encoding="utf-8") as outfile:
    outfile.write(str(soup))

Answer 2

You could consider using webpack. It is not easy to understand at first but this is a good tutorial to start with.