CSS优化自动更改类名称 [英] CSS optimization to auto change class names

问题描述

我正在寻找一种工具来优化我的网站的完整版本。我使用 SASS 作为 CSS预处理器和 Uglify 来创建我的JavaScript文件以及几个与 Grunt 绑定在一起的所有工具。此外，标记在这种情况下是单个 index.html 文件，但在其他项目中，它位于PHP文件或Liquid模板中。

我使用BEM（块，元素，修饰符）来命名我的有时会导致相当大的 classnames ，例如 navigation__item__link - home 或甚至更长。

我正在寻找一种工具，它可以自动将最终构建的 CSS 文件转换为更改类或标识的方式名称为 .a，.b ，但是会根据相同的方法更改每个HTML和JavaScript文件，因此相关的代码不会混乱。

我想保留我的原始项目文件，所以我希望该工具能够根据这些规则创建新文件，并且最好能够使用 Grunt 。

解决方案

听起来你正在寻找一种名为 munch 的工具。这是一个预先部署的工具，可以完全满足您的要求。它是一个命令行实用程序，可以指向您的视图（html），css和js文件，它将缩短类名和id，同时仍保持它们的独特性，并保持所有源文件之间完整的参照完整性。还有一些方便的选项，比如输出映射文件的能力，该文件列出了它所做的转换。文档非常简单。

FWIW，我不属于该项目。

I am looking for a tool to optimize my website's complete build. I am using SASS as a CSS preprocessor and Uglify to create my JavaScript files, and a couple of more tools all tied together with Grunt. Also, the markup is in this case a single index.html file, but in other projects it's in either PHP files or in Liquid templates.

I am using BEM (block, element, modifier) to name my classes and sometimes, that leads to quite huge classnames, such as navigation__item__link--home or even longer.

I am looking for a tool that automatically converts the final, built CSS files in a way that it changes the class or id names to something like .a, .b, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.

I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with Grunt.

解决方案

It sounds like you are looking for a tool called munch. It is a pre-deployment tool that does just what you are asking for. It is a command line utility that you point at your view (html), css and js files and it will shorten class names and ids while still keeping them unique and keeping referential integrity intact between all of the source files. There are also some handy options, like the ability to output a map file that lists what transformations it made. The documentation is pretty straight-forward.

FWIW, I am not affiliated with the project.

这篇关于CSS优化自动更改类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！