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，我不隶属于该项目。