修改HTML文件以嵌入所有外部腳本和CSS <script> and <style> tags

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

因此，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搜索<script>，使用“rel”-attribute搜索<link>
• 在臨時文件中合並腳本和css
• 縮小它們
• 將它們嵌入到html文件中（找到腳本/鏈接的最后一個標記）
• 刪除<script>（src）和<link>（rel）標記
• 保存為目標HTML

謝謝您的幫助 ;）

Answer 2

你可以在linux上使用一個簡單的shell腳本來完成工作。 它只是將所有文件合並為一個。 https://github.com/dfsq/compressJS.sh