HTML + JavaScript + CSS压缩工具

Question

我需要一个工具，能够压缩、优化和混淆许多不同类型的文件：

• HTML（仅压缩）
• JavaScript（压缩、优化和混淆）
• CSS（仅压缩）

最终结果应该只有一个 HTML 文件，其中包含所有 JavaScript 和 CSS 的嵌入式代码，或者在最坏的情况下分别生成 3 个文件：HTML、JS 和 CSS。

我知道像 YUI 压缩程序等工具，但我目前还没有找到一种可以同时处理所有这些文件类型并将它们合并为一个巨大的文件的压缩器。

- Gad D Lord

---

目前正在尝试使用 Digua（http://digua.sourceforge.net）。 - Gad D Lord

问题：你怎么可能把所有这些东西合并成一个文件？除非它们本来就在一个文件中开始的。 - Pure.Krome

它们可以通过将一个接在另一个后面，很容易地与批处理/ Bash 脚本合并。 - Gad D Lord

在 HTML 中嵌入 JS+CSS 并不是最优的选择。当多个 HTML 页面共享相同的 JS+CSS 时，会消耗更多的网络带宽。 - BalusC

离线文档怎么办？PDF 文件仍需要阅读器，而 HTML 可以在几乎所有设备上显示。 - Tomas Tintera

Answer 1

如果您还没有使用gzip，请开始使用它，这样我们就可以结束这个事情了 ;)

- Dagg Nabbit

Answer 2

我的建议是将所有的JavaScript代码放在头部的<script>标签中，将所有的CSS代码也放在一个<style>标签中。然后尽可能地进行优化，最后自己进行缩小处理。没有任何软件能够处理每一种情况。如果你想要减小文件大小，只需删除换行符和不必要的空格。

我还发现了this，它应该适用于包含这三个文件的文件。

同时请注意，如果您开始删除可选标签，可能会遇到一些问题。有些浏览器的兼容性并不像它们应该的那样好。

- Jason

---

说没有任何软件能够处理所有情况是一个相当大胆的声明。什么特殊情况会使这成为一项艰巨的任务？我最担心的问题是JavaScript使用CSS选择器，需要将其标记为常量，以便不受缩小影响。 - Jamie Wong

Answer 3

你可以使用jsCompressor来压缩和合并多个JavaScript文件，以及CSS Compressor来将多个Css文件压缩/合并成一个文件。 另外，为了优化你的HTML文件，你可以将代码发送到Google Clouser服务器的post请求中，该服务器会返回优化后的Html代码。

- Jitendra

Answer 4

据我所知，目前还没有这样的工具。但是如果您在服务器端使用PHP，可以尝试 PHP Speedy（虽然不再积极开发，但仍可用）或 Minify 进行自动缩小、缓存和gzip（HTML、CSS、JS）等操作。

编辑：像Badger建议的kangax的HTML缩小器仅进行HTML缩小处理。

- gblazex

---

我不能使用PHP，因为没有服务器端 :). 这个项目有点奇怪，没有像Java或Php那样的服务器端。 我发现了Digua（http://digua.sourceforge.net） - 一个非常类似于我所需要的工具。目前我正在尝试它。 - Gad D Lord

Answer 5

Gad，请考虑缩小CSS的缺点。如果您没有一个系统，在其中编辑normal/minify/，然后部署它，那么稍后编辑CSS可能会变得非常棘手。

我在一家国际银行的大型UI刷新项目中经历了整个争论过程。特别是一个站点每天有100万以上的访问量，尽管我们尽最大努力使其保持最小化（在一个高流量的站点上，每一点都会增加带宽），但带宽数字仍然很疯狂。通过一支由非常有才华的团队进行的业务分析，确定了我们将采取几个步骤，但不包括CSS缩小，因为这会增加工程师撤消缩小操作、修复、缩小和重新部署简单CSS调整所需的时间。数据显示，即使带宽提高了5GB/天，也仍然比不支付UI工程师额外时间更便宜。

我们不知道您网站的具体情况，但并不是很多网站需要担心我的示例所使用的流量。在Firebug的新速度分析器中运行您的网站，看看从缩小文件中真正获得的好处是什么......现在将其乘以您的流量。通常，这个数字并不太可怕。花时间做图像精灵，将CSS和JS合并到各自的文件中（比将它们混合到单独的PHP文件中更好，因为可以获得缓存优势），以限制HTTP请求，并确保缓存正确设置。运行Gzip压缩。如果经过这些步骤您还不满意，那么就将网站提升到一个新的水平。

保持简单......这会极大地影响网站生命周期中的更新和维护部分。通过节省的时间和头痛，您可以帮助我们回答问题 :)

- bpeterson76

---

谁会撤销代码压缩呢？当然是无用的。一支由非常有才华的团队组成的人可以想出只需要一个开发版本和一个简单的自动化部署过程。撤销代码压缩？从未听说过。考虑到 JavaScript 压缩，你根本不能撤销。你需要不同的方法来处理这个问题…… - gblazex

在某些商业环境中，例如上述情况，没有将一段独立的代码保留在代码库中的选项。如果我们将其压缩并部署，它就成为了向主干前进的代码。而且，在部署过程中让一个单独的业务流程进行压缩也将是一个相当大的挑战。同样，这取决于你的环境有多么复杂，以及你想让多少人参与到性能的微小改进中。在我工作之前，我不会理解改变一个字符需要5个人3周的情况。 - bpeterson76

“仍然不雇用UI工程师来做额外的工作更便宜。” CSS工程师=过度设计，我个人认为。 - Enriquev

尽管系统架构水平很糟糕，但是您永远不应该在原地缩小代码。我会反对这个答案，因为我们应该在这里提供技术上正确的答案，而不是基于最坏情况下的实用主义。 - FriendOfFuture

真的吗？一个人不能在代码更新时负责"重新编译"整个网站吗？你能解释一下为什么大型组织不能这样做吗？我的旧公司可以。 - user1382306

“保持简单……这会在网站生命周期的更新和维护部分产生巨大的影响”——这是为开发拥有单独的代码库并部署该代码的构建版本的一个很好的理由。将它们分开保持有各种好处，其中之一是缩小文件体积，另一个是去除用户不想看到的注释等。 - Trevor

Answer 6

http://prettydiff.com/?m=minify可以完美地满足您的需求，但它只能压缩JavaScript而不能混淆它。

- austincheney

Answer 7

我建议你查看包含在HTML5 Boilerplate中的构建脚本：http://html5boilerplate.com/。只需进行一些最小的调整，它就可以实现你想要的功能。

- FriendOfFuture