将 CSS 和 Javascript 自动内联到 HTML 中的工具

软件推荐 javascript html css
2021-10-10 01:58:45

你知道一些工具来

自动将 CSS 和 JavaScript 外部资源内联到 HTML 文件中

目标是拥有一个可以离线正确查看的 HTML 文件。

类似于StackOverflow 上的一些老问题(但那里的答案似乎只支持 CSS,不支持 Javascript)。

任何一个平台:在线(网络访问)、Unix、Windows 都可以。

我认为可以通过替换所有来实现:

<script type="text/javascript" src="x.js"></script>

   <script type="text/javascript">
     And here goes the content of the x.js file
   </script>

同样<link rel="stylesheet" type="text/css" href="theme.css">都是

<head>
 <style>
   Here goes the content of theme.css
 </style
</head>

(或任何实际语法)

4个回答

安装/使用:

  • 安装Python 2.7x -确保选择将其添加到 PATH var 的选项
  • 安装Node.js
  • 安装Windows SDK 7.1它适用于任何 XP+。Windows SDK 8 不能开箱即用 - 不包括所有工具。如果您已经安装了 VS 2010 可再发行组件,请尝试在 Windows SDK 的安装程序中取消选中它们 - 否则您可能必须卸载它们才能安装它,然后在某些时候需要重新安装较新的版本。
  • 安装WebCombiner Node.js 包。最好使用npm install -g web-combiner SDK 命令行中的 cmd 行而不是普通的 cmd 行是最简单的
  • 运行命令行inliner path.html out.html true

这些说明假设 windows - 如果不是 windows,显然不需要 SDK,但可能需要替代编译器。

任何<link href=人都必须参考本地文件,否则它不喜欢它(即致命错误)。这可能很容易解决,但目前这是一个弱点。最糟糕的部分是它没有检查它是否是一个 css 链接,因此 atom/image refs<link也会导致问题。显然,这意味着 css/js 必须是本地的,但只是从 Firefox 或 Chrome 保存为 html 页面默认情况下会保存这些页面,所以这应该不是一个严重的问题,虽然有点烦人。

尼克·王尔德的回答给我带来了另一个答案:

另一个名为 Inliner 的 nodejs 项目

(我才开始尝试使用它,还没有成功实现我的目标——因为一些错误会弹出)

您的问题不是很清楚,但我越接近您的目标(单个 HTML 文件)就是MHTML 格式好吧,它不是一个单独的 HTML 文件,而是一个单独的 MHTML 文件,但是,你可以在里面包含 JS、CSS 等等,比如图片!

Microsoft IE 能够将页面保存到单个 MHT 文件中。

Firefox 插件 UnMHT 允许您在每个操作系统上呈现此文件。

这是一个有趣的页面:

如何在 Linux 上的 Firefox 中打开 .mht 文件

我添加这个是因为我最近需要完成确切的任务,但这个解决方案似乎更容易设置......

您可以安装 python 然后运行pip install htmlark[http,parsers]以安装HTMLArk


usage: htmlark [-h] [-o OUTPUT] [-E] [-I] [-C] [-J]
               [-p {html.parser,lxml,html5lib,auto}] [-v] [--version]
               [webpage]

Converts a webpage including external resources into a single HTML file. Note
that resources loaded with JavaScript will not be handled by this program, it
will only work properly with static pages.

positional arguments:
  webpage               URL or path of webpage to convert. If not specified,
                        read from STDIN.

optional arguments:
  -h, --help            show this help message and exit
  -o OUTPUT, --output OUTPUT
                        File to write output. Defaults to STDOUT.
  -E, --ignore-errors   Ignores unreadable resources
  -I, --ignore-images   Ignores images during conversion
  -C, --ignore-css      Ignores stylesheets during conversion
  -J, --ignore-js       Ignores external JavaScript during conversion
  -p {html.parser,lxml,html5lib,auto}, --parser {html.parser,lxml,html5lib,auto}
                        Select HTML parser. If not specifed, htmlark tries to
                        use lxml, html5lib, and html.parser in that order (the
                        'auto' option). See documentation for more
                        information.
  -v, --verbose         Prints information during conversion
  --version             Displays version information

生成的 html 将打印到标准输出,因此您需要使用输出重定向将其保存到如下文件:htmlark http://example.com/ > inlined.html