最近我开始使用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,.css文件中的所有类,ID？
当我在style.css中看到85次出现“.wrapper”类时,我突然想要解析我的.css文件.这个.wrapper类在我的模板( jQuery.tmpl),.js文件中使用.我在gmail源代码中看过uglified .css类,我希望我也能做到.
我的目的是在所有.css,.html,.js文件中用’.w'(任何短名称)替换’.wrapper’.我怎样才能相对地解析.js,.css文件中的所有类,ID？
解决方法
当你“丑化”某些东西时,有2-3个过程在起作用：
>缩小 – 消除文本文件中不必要的空格.
>混淆 – 将变量,类等重命名为较小的名称以保存字符的位置.
>连接 – 将多个文件合并在一起以消除不必要的HTTP请求的位置.
看起来你主要是在谈论混淆,所以这就是我要解决的问题.我知道有两个工具可以很好地工作,可以在构建过程中使用：
> HTML Muncher – HTML Muncher是一个基于Python的5年工具.它只能处理HTML,CSS和JS文件,所以在将静态资产发送到这个基于Python的工具之前,你必须先编译它们.此外,它不适用于转义的类/ ID名称或特殊字符(因此请保持基于alpha的字母,并且仅在第一个字母字符后使用数字).最后,它根据hashid对名称进行模糊处理.所以类名并不像你想要的那样简洁.
> css-loader用作Webpack的一部分 – Webpack允许我们使用加载器转换文件并将它们作为前端“捆绑包”中的依赖项传递. css-loder有这个名为Local Scope的很酷的功能,它基本上允许你根据你的webpack配置重命名你的类和id. Webpack可能很难设置,并且在撰写本文时将这些混淆的类名称转换为HTML文件非常困难.但是如果你能让它工作并使它成为你构建的一部分,我认为这个工具有很多希望！
在这个时候,我会说,如果你不能让Webpack成为你构建的一部分,那么除非你能处理HTML Muncher所有的问题,否则此时可能不值得对你的CSS进行模糊处理.
