修改 HTML 文件以将所有外部脚本和 CSS 嵌入到 <script> 和 <style> 标记中

Question

我正在寻找一种方法来自动将我的所有脚本放入我的 HTML 文件中的脚本标记中。

所以我想要这个：

<script src="..."></script>
<script src="..."></script> 
...

成为：

<script type="text/javascript">
    ...
    all the JavaScript code from every Script file
    ...
</script>

这可以用蚂蚁、蝙蝠或其他东西来完成吗？

我还希望缩小 JavaScript。但这不是重点。

提前致谢。

更多信息：

所以我已经有了一个 bat 文件，它将所有 JavaScript 文件和所有 CSS 文件压缩为一个 main.js 和 main.css：

index.html
main.js
main.css

但我只想要一个包含所有 CSS 和 JavaScript 的 单个 index.html 文件。所以我可以将这个文件作为离线 Web 应用程序提供。

所以基本上我需要一种方法来构建这个 index.html 文件：

• 删除外部脚本链接
• 删除外部 CSS 链接
• 将压缩后的 JavaScript 添加到脚本标签中
• 将压缩后的 CSS 添加到样式标签中

Answer 1

您可以在 linux 上使用一个简单的 shell 脚本来完成这项工作。 它只是将所有文件合并为一个。 https://github.com/dfsq/compressJS.sh

Answer 2

所以正如 Monacraft 推荐的那样，我使用 Python（第一次）来修改/创建 html 文件。

现在我只需要运行这个：

python build.py ../source.html target.html

见上面的代码：

import sys, re, os
from collections import deque
from bs4 import BeautifulSoup, Tag
from jsmin import jsmin
from csscompressor import compress

# html param 
html = sys.argv[1]
# target param 
target = sys.argv[2]
# path from html param
path = re.sub(r"[^\/]*$", "", html)
# open html file
soup = BeautifulSoup(open(html))
# find last script as anchorpoint
lastScript = soup.findAll("script", attrs = {"src" : True})[-1]
# get all scripts containing src attribute (= external scripts)
scripts = soup.findAll("script", attrs = {"src" : True})
# find last style link as anchorpoint
lastStylesheet = soup.findAll("link", attrs = {"rel" : "stylesheet"})[-1]
# get all links to css stylesheets
stylesheets = soup.findAll("link", attrs = {"rel" : "stylesheet"})

# create list of script srcs
print("\nRead Scripts:")
scriptsSrc = deque()
for script in scripts:
    scriptsSrc.append(path + script.attrs["src"])
    print("\t" + path + script.attrs["src"])

# create list of stylesheets srcs
print("\nRead Stylesheets:")
stylesheetsSrc = deque()
for stylesheet in stylesheets:
    stylesheetsSrc.append(path + stylesheet.attrs["href"])
    print("\t" + path + stylesheet.attrs["href"])

# merge scripts to temp.js
print("\nMerge Scripts:")
print("\t", end="")
with open("temp.js", "w") as outfileScript:
    for fname in scriptsSrc:
        # add space every script
        outfileScript.write("\n")
        print("~", end="")
        with open(fname) as infile:
            for line in infile:
                outfileScript.write(line)
print("\n");

# merge stylsheets to temp.css
print("Merge Stylesheets:")
print("\t", end="")
with open("temp.css", "w") as outfileCSS:
    for fname in stylesheetsSrc:
        # add space every script
        outfileCSS.write("\n")
        print("~", end="")
        with open(fname) as infile:
            for line in infile:
                outfileCSS.write(line)
print("\n");

# minify javascript
print("Minify temp.js\n\t~")
with open("temp.js") as js:
    minified_js = jsmin(js.read())

# minify css
print("\nMinify temp.css\n\t~")
with open("temp.css") as css:
    minified_css = compress(css.read())

# replace scripts with merged and min embed script / css
print("\nReplacing and deleting\n\t~")
tag = soup.new_tag("script")
tag["type"] = "text/javascript"
tag.append(minified_js)
lastScript.replace_with(tag)

tag = soup.new_tag("style")
tag["type"] = "text/css"
tag.append(minified_css)
lastStylesheet.replace_with(tag)

#remove script and style tags
for script in scripts:
    script.decompose()
for stylesheet in stylesheets:
    stylesheet.decompose()

#remove temp
os.remove("temp.js")
os.remove("temp.css")

#save html as target
file = open(target,"w")
file.write(soup.prettify())
file.close()

print("\nFIN\n")

它是如何工作的：

• 加载源 HTML
• 使用“src”-attribute 搜索
• 在临时文件中合并脚本和 css
• 缩小它们
• 将它们嵌入到 html 文件中（找到脚本/链接的最后一个标签）
• 删除
• 另存为目标 HTML

感谢您的帮助；）