javascript - 修改 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>

这可以用 Ant 、 bat 或其他东西来完成吗？

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

提前致谢。

更多信息:

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

index.html
main.js
main.css

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

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

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

Answer 1

因此，正如 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”属性的<script>和带有“rel”属性的
• 合并临时文件中的脚本和 css
• 缩小它们
• 将它们嵌入到 html 文件中(在其中找到脚本/链接的最后一个标记)
• 删除 <script> (src) 和 (rel) 标签
• 另存为目标 HTML

感谢您的帮助；)