如何将所有资源（css、js、图像）嵌入到一个 html 文件中？答案

【问题标题】：How to embedded all resources(css,js,images) into one single html file?如何将所有资源（css、js、图像）嵌入到一个 html 文件中？
【发布时间】：2012-11-20 20:21:28
【问题描述】：

所以我的问题有点像这个one 的克隆，除了建议使用.net 技术的答案，我正在使用 linux。

这里是一个总结：

我正在使用基于 html5 的幻灯片进行演示。这些幻灯片像每个网站一样创建，其中包含包含资源的子文件夹。我正在寻找一种将这些幻灯片转换为独立文件以便能够轻松共享它们的方法。

这只是意味着用base64图像替换所有图像，用内联纯文本替换js/css导入。我也在使用 require.js，所以替换 javascript 导入可能会有点棘手，但这将是第二次问题。

我没有使用 MHTML，因为浏览器并不真正支持它。

【问题讨论】：

您可以将它们全部转换为 zip 文件以便于共享。
"这只是意味着用base64图像替换所有图像，用内联纯文本替换js/css导入。"那么哪个部分你不知道该怎么做？或者您是否正在尝试编写为您创建独立文件的代码？
很抱歉，如果不清楚，但是是的，我想以自动方式进行。实际上，如果我没有找到任何好的解决方案，我可以自己用 Java 创建它。

标签： javascript html css mhtml

【解决方案1】：

尝试使用 Gulp.js 或 Grunt.js，它们对文件进行操作并且每个都有很多插件。我个人更喜欢使用 Gulp，因为它基于流的模型——它既快速又灵活，但你可能会发现 Grunt 更简单，或者（很可能）更快地找到合适的插件。它们都是接受用 JavaScript 编写的配置文件的 Node.js utils，因此您不必使用 Java 或任何非常规技术来完成此任务。

您可以先阅读introductionary article about Gulp，然后通过以下关键字之一搜索available gulp plugins：inline、asset、minify 等。

祝工作流程优化好运！

【讨论】：

Thks 这是个好主意。我实际上在另一个项目中使用 grunt。我会看看两者，看看我是否能想出一个令人满意的插件链。