javascript - Uglify 整个元素(.css，.js，.html 文件相对)

Question

最近我开始使用 Grunt，它确实有助于缩小/连接 .css 文件和缩小/丑化/连接 .js 文件。我还使用 grunt watch 自动编译和重启服务器， 表示。当时我很开心。

当我在我的 style.css 中看到 85 个“.wrapper”类时，我突然想丑化我的 .css 文件。这个 .wrapper 类在我的模板 ( jQuery.tmpl )、.js 文件中使用。我在 gmail 源代码中看到了 uglified .css 类，我希望我也能做到。

我的目的是将所有 .css、.html、.js 文件中的“.wrapper”替换为“.w”(任何短名称)。如何相对地丑化.js、.html、.css 文件中的所有classes、id？

Answer 1

当你“丑化”某些东西时，有 2-3 个过程在起作用:

1. 缩小 - 消除文本文件中不必要的空白。
2. 混淆 - 将变量、类等重命名为更小的名称以节省字符。
3. 串联 - 将多个文件合并在一起以消除不必要的 HTTP 请求。

看起来您主要是在谈论混淆，所以这就是我要解决的问题。我知道有两种工具非常好并且可以在构建过程中使用:

1. HTML Muncher - HTML Muncher 是一个已有 5 年历史的基于 Python 的工具。它只能处理 HTML、CSS 和 JS 文件，因此您必须先编译静态 Assets ，然后再将其发送到这个基于 Python 的工具。此外，它不适用于转义的类/ID 名称或特殊字符(因此请保持您的字母为基础，并且仅在第一个字母字符之后使用数字)。最后，它会根据 hashid 混淆名称。因此类名并不像您希望的那样简洁。

2. css-loader用作 Webpack 的一部分- Webpack 允许我们使用加载器来转换文件并将它们作为前端“包”中的依赖项传递。 css-loder 有一个很酷的功能，叫做 Local Scope这基本上允许您根据您的 webpack 配置重命名您的类和 ID。 Webpack 可能很难设置，并且很难(在撰写本文时)将这些混淆的类名放入 HTML 文件中。但是，如果您能让它发挥作用并使其成为您构建的一部分，我认为该工具大有前途!

在这个时候，我想说如果你不能让 Webpack 成为你构建的一部分，那么此时混淆你的 CSS 可能不值得，除非你能处理 HTML Muncher 的所有问题。