前言
在前端开发中，BEM (Block-Element-Modifier) 是一种非常流行的命名规范。而且在使用BEM之后，对于 CSS 的组织、更新和维护都变得更加容易。但是，在互联网时代，我们追求的是越来越高的效率，我们需要一些自动化工具来帮助我们实现 BEM 的使用。在这方面，gulp-bem-tmpl-specs 成为了一种非常好的选择。
安装与使用
使用 npm 安装 gulp-bem-tmpl-specs。
npm install --save-dev gulp-bem-tmpl-specs
在使用 gulp-bem-tmpl-specs 之前，需要了解一些基本配置参数。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -------------------------------
----- ------- - -
------ ---------------------
---------- -----------------------
------- -------
------ ----------
------ -----
--
---------------------- -- --
----------------
----------------------------
--------------------------------
--specs: 包含所有规范文件的 glob，这些文件使用 Jest 测试框架。templates: 包含所有规范文件的 glob，这些文件是一个 BEM 结构的模板。output: 模板生成的目标路径，如果不设置，则替换源文件。babel: 预编译文件的 babel 配置。watch: 是否监听文件变化，并自动编译生成 BEM 结构代码。
只需简单地设置这些参数即可开始使用 gulp-bem-tmpl-specs，但在具体应用中，还需要了解更多的细节。
参数详解
specs
参数 specs 用于指定 Jest 测试框架来进行覆盖测试，它与 Jest 的配置文件一起使用。
templates
参数 templates 用于指定规范文件的 glob，规范文件使用 Jest 测试框架。
output
参数 output 用于指定模板生成的目标路径，如果不设置，则替换源文件。
babel
参数 babel 是依赖一个预编译文件，并配置其babel。实现gulp-bem-tmpl-specs的模板类的构造代码需要使用它。
watch
参数 watch 用于指示是否应该监听文件变化，并自动编译生成 BEM 结构代码。
实例代码
这里演示一个简单的 example，我们通过该代码可以了解到，如何使用gulp-bem-tmpl-specs。
安装 gulp-bem-tmpl-specs
npm i --save-dev gulp-bem-tmpl-specs
生成目录结构
.
├── gulpfile.js
└── src
└── simple.specs.tmpl定义simple.specs.tmpl
# bemjson
{
"block": "simple",
"content": "Lorem ipsum dolor sit amet."
}简单设置 gulpfile.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -------------------------------
----- ------- - -
------ ---------------------
---------- -----------------------
------- -------
------ ----------
------ -----
--
---------------------- -- --
----------------
----------------------------
--------------------------------
--
-------------------- ---------------最后，在命令行下运行gulp，会生成该目录结构:
.
├── gulpfile.js
└── src
├── simple.js
├── simple.spec.js
├── simple.specs.html
└── simple.specs.tmpl这就是通过具体的实例演示，如何使用gulp-bem-tmpl-specs来实现 BEM 结构代码的自动生成。
总结
通过上述的学习与实践，大家应该可以清楚的了解到 gulp-bem-tmpl-specs 的主要功能与应用，以及如何使用它来自动生成 BEM 结构代码。这不但可以提高前端开发的效率，还能够让开发者更好地避免一些代码错误带来的问题，减少所需要面对的挑战，为实现一个优秀的前端项目打好了基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f381e8991b448d3d73