整理整个项目（相对于.css，.js，.html文件）

Question

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

突然，当我在style.css中看到85次出现“.wrapper”类时，我想将我的.css文件弄糊涂。我的模板（jQuery.tmpl），。js文件中使用的此.wrapper类。我在gmail源代码中看过uglified .css类，我希望我也能做到。

我的目的是在所有.css，.html，.js文件中用'.w'（任何短名称）替换'.wrapper'。如何相对地解析.js，.html，.css文件中的所有class es，id？

Answer 1

当您“丑化”某些内容时，有2-3个进程在起作用：

1. 缩小 - 消除文本文件中不必要的空格。
2. 混淆 - 将变量，类等重命名为较小的名称以保存字符的位置。
3. 连接 - 将多个文件合并在一起以消除不必要的HTTP请求的位置。

看起来你主要是在谈论混淆，这就是我要解决的问题。我知道有两个工具漂亮很好，可以在构建过程中使用：

1. HTML Muncher - HTML Muncher是一款已有5年历史的基于Python的工具。它只能处理HTML，CSS和JS文件，所以在将静态资产发送到这个基于Python的工具之前，你必须先编译它们。此外，它不适用于转义的类/ ID名称或特殊字符（因此保持您的alpha基于alpha并且仅在第一个alpha字符后使用数字）。最后，它根据hashid对名称进行模糊处理..所以类名并不像你想要的那样简洁。

2. css-loader用作Webpack的一部分 - Webpack允许我们使用加载器转换文件并将它们作为依赖项传递到前端“bundle”中。 css-loder有这个名为Local Scope的很酷的功能，它基本上允许你根据你的webpack配置重命名你的类和id。 Webpack可能很难设置，而且（在撰写本文时）将这些混淆的类名称转换为HTML文件非常困难。但是如果你能让它工作并使它成为你构建的一部分，我认为这个工具有很多希望！

此时，我要说如果你不能将Webpack作为构建的一部分，那么除非你能处理HTML Muncher所有的问题，否则此时可能不值得对你的CSS进行模糊处理。