前端开发中，构建工具是必不可少的一环。Gulp 作为其中一个流程构建工具，在前端工程化中扮演了重要角色。为了更方便地实现BEM模式的CSS样式编写，在Gulp中出现了gulp-bem-css这一npm包。本文将详细介绍gulp-bem-css的使用方法及注意事项。
安装 gulp-bem-css
在使用 gulp-bem-css 之前，需要先安装 Gulp 以及 Node.js。具体安装方法可参考 官网。安装完成后，在项目目录中通过以下命令安装gulp-bem-css：
npm install gulp-bem-css --save-dev
使用 gulp-bem-css
使用gulp-bem-css首先需要在css文件中使用BEM命名方式来编写样式。这里假设已经了解了BEM的基础知识。
gulp-bem-css支持的文件和目录结构如下：
-- -------------------- ---- -------
----
--- -------
--- -------
- --- ----------
- --- -------------
--- -------
- --- ----------
- --- -------------
- --- -------------
--- --------------
--- ----------其中，以下划线（ _ ）开头的class属于modifier，相当于class的另一状态；以双下划线（ __ ）开头的属于element，表示该class为某个block的子元素。具体写法可以参照BEM的官方文档。
在gulpfile.js中配置gulp任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ------------------------
---------------------- ---------- -
------ --------------------------
-----------
----------------- -----
------------------ -----
----------- -----------
----------------- ---
---
--------------------------------
---其中通过bem()函数传入配置项，详细说明如下：
elementDelimiter：指定element的命名规则， 默认是'__'modifierDelimiter：指定modifier的命名规则， 默认是'--'outputType: 指定输出的类型，支持两种类型'extended'和'minified'，前者输出的CSS样式更加可读性高，后者输出文件体积更小defaultNamespace: 指定BEM命名规则的命名空间，默认是'b'
在运行gulp任务之后，输出的CSS文件如下：
.b-block1 {}
.b-block1__element {}
.b-block2 {}
.b-block2__element {}
.b-block2--modifier {}其中，.b-block1 表示的是一个block（块），.b-block1__element 表示的是一个该block的子元素，.b-block2--modifier 表示的是该block的modifier。
使用默认gulp任务
如果不想每次都执行 gulp build-css 这个命令，可以在 gulpfile.js 中配置默认的 gulp 任务。在下面的示例中，默认的任务名字为 default，只需要在 shell 中输入 gulp 即可执行。
gulp.task('default', gulp.series('build-css'));结语
通过gulp-bem-css，我们可以更加方便地实现BEM命名方式的CSS样式编写。同时，该库也支持多种配置，可以根据自己的需求进行选择。对于前端开发者而言，掌握Gulp和gulp-bem-css的使用，可以提高工作效率，提供代码复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5981e8991b448e5dd6