整理整个项目(相对于.css,.js,.html文件)

Question

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

突然,当我在style.css中看到85次出现".wrapper"类时,我想将我的.css文件弄糊涂.这个.wrapper类在我的模板(jQuery.tmpl),.js文件中使用.我在gmail源代码中看过uglified .css类,我希望我也能做到.

我的目的是在所有.css,.html,.js文件中用'.w'(任何短名称)替换'.wrapper'.我如何相对地将.js,.html,.css文件中的所有classes id,uglify化？

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-装载机被用作的一部分的WebPack -的WebPack允许我们使用装载机转换文件,并在将它们作为在前端"束"的依赖关系.css-loder有一个名为Local Scope的很酷的功能,它基本上允许你根据你的webpack配置重命名你的类和id.Webpack可能很难设置,而且(在撰写本文时)将这些混淆的类名称转换为HTML文件非常困难.但是如果你能让它工作并使它成为你构建的一部分,我认为这个工具有很多希望!

在这个时候,我想说如果你不能让Webpack成为构建的一部分,那么除非你能处理HTML Muncher所有的问题,否则此时可能不值得对你的CSS进行模糊处理.