整理整個項目（相對於.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文件中對所有class es， 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-loader用作Webpack的一部分--Webpack允許我們使用加載器來轉換文件並將它們作為前端“bundle”中的依賴項傳遞。 css-loder有一個名為Local Scope的很酷的功能，它基本上允許你根據你的webpack配置重命名你的類和id。 Webpack可能很難設置，而且（在撰寫本文時）將這些混淆的類名稱轉換為HTML文件非常困難。 但是如果你能讓它工作並使它成為你構建的一部分，我認為這個工具有很多希望！

在這個時候，我想說如果你不能讓Webpack成為構建的一部分，那么除非你能處理HTML Muncher所有的問題，否則此時可能不值得對你的CSS進行模糊處理。