内联外部HTML资源

时间:2018-05-14 21:32:01

标签: javascript html css command

我想知道是否有一个现有的(Linux)工具/命令来制作更多的HTML文件" standalone"通过自动内联第三方资源(JS和CSS)。

我使用a tool生成HTML报告,这些报告包含对第三方CSS(Bootstrap)和JS(jQuery)的引用。如果页面是通过file://访问的,由于安全限制,这些资源不起作用。它们在从HTTP服务器提供服务时起作用,但当文件是机器本地时,这显然不太理想。

到目前为止,我已经创建了一个脚本来查找/替换这些特定URL及其内容的数据URI。这暂时适用,但由于所有内容都是硬编码的,因此是一种维护负担。

是否有更可靠/标准的方法来实现类似的效果?我可以想到几种方法:创建数据URI(比如我的脚本),将内容写入样式/脚本元素,或者用相对路径替换本地副本的URL。任何这些都没问题。理想情况下,我可以做类似的事情:

$ inlineHtmlResources < existingFile.html > standloneVersion.html

2 个答案:

答案 0 :(得分:0)

您可能需要查看webpack,以下问题针对您建议的基本相同的用例进行解决:

How to bundle html, js and css in one html file with webpack?

上面的答案特别引用了这个插件: https://github.com/DustinJackson/html-webpack-inline-source-plugin

有很多选择;其他人都包含在这个问题中: Embedding all the external resources of an HTML page into a single file using javascript in the browser

答案 1 :(得分:0)

@WillCain的回答很有帮助,但是作为我从未使用过的系统(网络包)插件的插件,对我来说似乎有些过分。

我最终写了一个简单的Python脚本来代替http://chriswarbo.net/git/html-inliner/git