CSS優化自動更改類名

Question

我正在尋找一種工具來優化我的網站的完整版本。 我使用SASS作為CSS preprocessor和Uglify來創建我的JavaScript文件，還有一些工具都與Grunt捆綁在一起。 此外，標記在這種情況下是單個index.html文件，但在其他項目中，它位於PHP文件或Liquid模板中。

我正在使用BEM（ 塊，元素，修飾符 ）來命名我的類，有時，這會導致相當大的classnames ，例如navigation__item__link--home或甚至更長。

我正在尋找一種工具，可以自動轉換最終構建的CSS文件，它將類或id名稱更改為.a, .b ，但是根據相同的方法更改每個HTML和JavaScript文件，以便相關代碼不會搞砸。

我當然希望保留原始項目文件，因此我希望該工具能夠根據這些規則創建新文件，並且最好能夠將其與Grunt 。

Answer 1

聽起來你正在尋找一種名為munch的工具。 它是一種預部署工具，可以滿足您的要求。 它是一個命令行實用程序，您指向您的視圖（html），css和js文件，它將縮短類名和ID，同時仍保持它們的唯一性並保持所有源文件之間的引用完整性。 還有一些方便的選項，例如輸出映射文件的功能，列出它所做的轉換。 文檔很簡單。

FWIW，我不隸屬於該項目。

Answer 2

我會為此推薦Grunt 。

sass和css可以使用現有的grunt-sass插件完成，javascript可以使用grunt-uglify插件。

雖然我不確定是否有自定義uglification的插件，但您可以輕松編寫插件來執行此操作。 Grunt插件是用節點編寫的，所以如果你熟悉javascript，它就非常平易近人。