简介
BEM 是一种前端开发中常用的 CSS 命名方法论，它标准化了命名规范、提高了代码可维护性和可读性。本文将介绍一个可以辅助开发者使用 BEM 的 npm 包：gulp-bemlinter。
安装 gulp-bemlinter
在使用 gulp-bemlinter 之前，需要在项目中安装 Gulp 以及该插件：
$ npm install -g gulp $ npm install --save-dev gulp-bemlinter
配置 gulpfile.js
在项目根目录下创建 gulpfile.js 文件，然后在其中配置 gulp-bemlinter：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - --------------------------
----------------- -----------
------ ------------------
------------------
----------------------------
---
-------------------- ----------这个 gulpfile.js 表示执行 gulp-linter 插件的 lint 任务，在插件默认配置下 lint 会检查所有 HTML 文件是否符合 BEM 命名规范。如果没有报错，则任务执行成功。
gulp.task('default', ['lint']);默认任务会在 gulp 命令执行时自动执行，如果需要手动执行，直接运行 gulp 命令即可，如：
$ gulp
插件配置
gulp-bemlinter 的默认配置已经可以检查 HTML 文件是否符合 BEM 命名规范，但它也支持一些配置，让我们更灵活地设置检查规则。
可以在 gulpfile.js 中：定义 bemlinter 的配置对象，并在 gulp 的配置中传入这个对象即可，如：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - --------------------------
--- ------ - -
------- ----------
-
----------------- -----------
------ ---------------------------------------
------------------------
----------------------------
---
-------------------- ----------这个配置将会检查 *.html 和 blocks/**/*.html 文件夹下的所有 HTML 文件，并且只检查 blocks 目录下的 BEM 命名。
使用示例
接下来，让我们通过一个简单的示例来运用 gulp-bemlinter。
Index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --------- ------------
----- ---------------- -----------------
-------
------
---- --------------
---- --------------------------
---- -------------------
---- -------------------------
------
------
-------
-------Gulpfile.js
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - --------------------------
--- ------ - -
------- ----------
-
----------------- -----------
------ ---------------------------------------
------------------------
----------------------------
---
-------------------- ----------在终端上运行：
$ gulp
会得到如下报错信息：
Index.html
- The class name should have the BEM entity name `block` as a prefix.
- The class name should have the BEM element name `title` as a suffix.
- The class name should have the BEM element name `body` as a suffix.
- The class name should have the BEM element name `text` as a suffix.这个报错信息指示我们的 HTML 在 BEM 命名方面违背了一些规则，我们需要修改 CSS 类名，使其与 BEM 命名规范一致：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --------- ------------
----- ---------------- -----------------
-------
------
---- --------------
---- ---------------------------
---- --------------------
---- --------------------------
------
------
-------
-------在终端上再次执行 $ gulp 命令，将不会有任何的错误消息了。
总结
通过此篇教程，我们了解了 npm 包 gulp-bemlinter 的使用方法与配置，以及它如何检测违背 BEM 命名规范的 HTML 文件。使用 BEM 命名规范能够提高项目的可维护性和可读性。在团队开发中使用 gulp-bemlinter 的检测功能能够促进团队成员之间的交流和沟通，有利于项目的质量管理和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573a81e8991b448d42e0