javascript - CSS 优化以自动更改类名

Question

我正在寻找一种工具来优化我网站的完整构建。我正在使用 SASS作为CSS preprocessor和 Uglify创建我的 JavaScript 文件，以及更多的工具都与 Grunt 捆绑在一起.此外，在这种情况下，标记是单个 index.html。文件，但在其他元素中，它位于 PHP 文件或 Liquid 模板中。

我正在使用 BEM ( block, element, modifier ) 来命名我的类，有时，这会导致相当大的 classnames ，例如 navigation__item__link--home甚至更长。

我正在寻找一个自动转换最终构建的工具 CSS文件以将类或 ID 名称更改为类似 .a, .b 的方式, 而是按照相同的方法更改每个 HTML 和 JavaScript 文件，这样相关代码就不会被弄乱。

当然，我想保留我的原始元素文件，所以我希望该工具能够根据这些规则创建新文件，并且最好能够与 Grunt 一起使用它。 .

Answer 1

听起来您正在寻找一个名为 munch 的工具.它是一种预部署工具，可以满足您的要求。这是一个命令行实用程序，您可以指向您的 View (html)、css 和 js 文件，它将缩短类名和 id，同时仍然保持它们的唯一性并保持所有源文件之间的引用完整性。还有一些方便的选项，例如能够输出一个映射文件，其中列出了它所做的转换。该文档非常简单。

FWIW，我不隶属于该元素。