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

时间:2015-02-01 01:42:45

标签: javascript python html build embed

我正在寻找一种方法来自动将我的所有脚本放入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添加到样式标记

2 个答案:

答案 0 :(得分: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
  • 搜索&lt; script&gt;使用“src” - 属性和&lt; link&gt;使用“rel”-attribute
  • 合并临时文件中的脚本和css
  • 缩小他们
  • 将它们嵌入到html文件中(找到脚本/链接的最后一个标记)
  • 删除&lt; script&gt; (src)和&lt; link&gt; (rel)标签
  • 另存为目标HTML

感谢您的帮助;)

答案 1 :(得分:0)

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