将 JS/CSS/HTML 合并为单个 HTML

Question

我有一个包含 2 个 HTML 文件、6 个 CSS 文件和 11 个 JS 文件的小型本地 Web 应用程序。

1. 如果所有这些文件都（正确地）复制粘贴到单个 HTML 文件中，例如将 JS 放在<script>标题中的标签中，并将 CSS 放在<style>标签中，那么网络应用程序是否仍然可以工作 ？

2. 有谁知道可以自动安全地将一组 JS、CSS 和 HTML 文件合并为一个 HTML 的工具？

在网上搜索，我只找到了可以一次合并或缩小一种类型文件的工具，但不能创建合并的 HTML 文件（例如AIOM+、HTMLcompressor。我确实找到了这个名为Inliner 的应用程序，但它似乎在 Node.js 上运行，我不熟悉，目前不使用。

简而言之，我正在寻找一种简单的独立工具，可以读取 HTML 中的所有链接文件，并通过附加这些文件的内容来重写 HTML。如果这要求太多，那么只需确认手动完成这项工作会产生一个工作文件，或者在这样做时要考虑的任何提示。谢谢！

Answer 1

我为它写了一个简单的python脚本。

这是我的树：

root-folder
??? index.html
??? build_dist.py
??? js
?   ??? somescript.js
??? css
?   ??? styles1.css
?   ??? styles2.css
??? dist

我运行脚本：

cd root-folder
python build_dist.py

并且在 dist 文件夹中创建了一个 oneindex.html 文件。
该文件包含index.html中用link和script标签指定的文件中的所有 js 和 css 。
您可以在任何地方使用此文件。

笔记：

1. HTML 文件必须是根文件夹中的“index.html”。
2. 它仅适用于单个 HTML 文件。我不知道你想用多个 HTML 文件做什么。

build_dist.py 代码：

root-folder
??? index.html
??? build_dist.py
??? js
?   ??? somescript.js
??? css
?   ??? styles1.css
?   ??? styles2.css
??? dist

Answer 2

您可以考虑使用webpack。一开始并不容易理解，但这是一个很好的入门教程。