使用包括 BEM 在内的 gulp 进行更少的验证答案

【问题标题】：Validate less with gulp including BEM使用包括 BEM 在内的 gulp 进行更少的验证
【发布时间】：2015-05-14 21:08:25
【问题描述】：

所以我有一个相当不错的代码库，它使用较少（许多文件）。我想将 css 转换为使用 BEM（实际上是 BEM 的一种变体），并且我很想找到一种 gulp 方法来 lint 包括命名约定在内的更少文件。

有没有办法做到这一点？

所以基本上我想要所有默认的 css lint 东西，并另外定义可能不会被破坏的命名约定。

例如类需要以 c-、u- 或 o- 开头，不允许使用其他类。

【问题讨论】：

我宁愿认为这是一个问题，我不是问哪个工具最适合它，我想知道如何解决使用 gulp 验证我的语法的问题。我看不出答案会如何自以为是，因为这是一个“如何做”的问题。
这是一种一次性的解决方案，可以将您现有的 LESS 转换为符合 BEM 标准，还是您希望 Gulp 通过您的 LESS/CSS 并确认它符合 BEM 标准？
我希望它在开发时确认它，不是一次，而是一直。也有助于提醒他人遵守规则。 :)
你不能用github.com/necolas/postcss-bem-linter吗？

标签： css less bem

【解决方案1】：

如果像https://github.com/necolas/postcss-bem-linter 这样的后处理器由于某种原因无法为您工作。您可以自己编写，也可以创建一个 Less 插件。 Less 插件可以是访问者，也可以是后期处理，供您使用。

例如类需要以 c-、u- 或 o- 开头，不允许使用其他类。

检查上述要求的访问者插件示例：

 <!DOCTYPE html>
 <html>
 <head>
 <title>BEM Validation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="bem.less" rel="stylesheet/less">
<script>
var ValidateBEM = function(less) {
    this._visitor = new less.visitors.Visitor(this);
};
ValidateBEM.prototype = {
    isReplacing: true,
    run: function (root) {
    return this._visitor.visit(root);
    },
    visitRuleset: function (rulesetNode, visitArgs) {
        console.log(visitArgs);
        if(rulesetNode.selectors) {

        for (var i = 0; i < rulesetNode.selectors.length; i++) {

            if(rulesetNode.selectors[i].elements[0].value.match(/^\./)){


                if(!rulesetNode.selectors[i].elements[0].value.match(/^\.[cuo]-/))
                {
                console.log(rulesetNode.selectors[i].elements[0]);
                throw { type: 'BEM Validation',
                message: "class names should start with c-, u- or o-",
                filename: rulesetNode.selectors[i].elements[0].currentFileInfo.filename,
                index: rulesetNode.selectors[i].elements[0].index };
                }   

            }   
        }

        }   

        return rulesetNode;
    }
};

var ValidateBEMPlugin = {
    install: function(less, pluginManager) {
        pluginManager.addVisitor(new ValidateBEM(less));
    }
}; 

less = { 
    env: "development",
    plugins: [ValidateBEMPlugin]
};
</script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>

</head> 
<body>
<header>
    <h1>header</h1>
</header>




</body>
</html>

当bem.less 包含以下类时：

.class {
t:test;
}

在上面会导致如下所示的错误：

Grunt-contrib-less 也允许您使用 Less 插件：

less: {
  production: {
    options: {
      paths: ["assets/css"],
      plugins: [
        new (require('less-plugin-bem'))({browsers: ["last 2 versions"]}),
      ] }
}
}

上面使用的插件只能在浏览器中使用，参见How to exend the Less compiler with a custom function leveraging a plugin如何创建CLI版本。

【讨论】：

这听起来不错，我看看能不能用它创建一个 gulp 插件。谢谢。