简介
在前端开发中，BEM格式是被广泛使用的一种HTML/CSS命名方式。在此基础上，gulp-bem-tmpl-specs-updater是一个基于Gulp构建工具的插件，可以帮助我们自动生成BEM模板和Specs测试。本文将详细介绍如何使用此插件，并提供相关的示例代码。
安装
确保在安装gulp-bem-tmpl-specs-updater之前已经安装过Gulp。
在你的工程目录中运行以下命令：
npm install --save-dev gulp-bem-tmpl-specs-updater
至此，我们已经成功安装了gulp-bem-tmpl-specs-updater插件，接下来我们就可以开始使用它。
使用
在Gulp中使用
使用gulp-bem-tmpl-specs-updater插件可以不需要使用文件模板以及手动创建Specs测试，它会自动生成并且为您生成包含模板的HTML文件，Specs测试JavaScript文件以及模块的SCSS文件。
以下是使用gulp-bem-tmpl-specs-updater的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ---------------------------------------
----- ------- - --------------------------
----- ------------- - -------------------------------
---------------- ---------- -
------ -----------------------------------
----------------
--------------------------
---
-------------------- ---------- -
------ ------------------------
-----------------------------
-------------------------
---
-------------------- ------- ------------在运行gulp命令后，插件将在 blocks/.tmpl/index.html 中自动创建组件的HTML文件，同时它也为HTML文件自动创建Specs测试JavaScript文件，生成的测试文件位于 blocks/.tmpl/index.js 中。
与Webpack的结合使用
当使用Webpack管理您的前端资源时，您也可以使用gulp-bem-tmpl-specs-updater插件创建Webpack打包的相关文件。
以下是使用gulp-bem-tmpl-specs-updater结合Webpack打包的示例：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -
---- ------------------
----- ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ----------------
----- -------------
--
-
--总结
gulp-bem-tmpl-specs-updater插件是一个方便自动生成BEM模板和Specs测试的插件，若您在前端开发BEM项目时需要此类功能，那么它将是您的十分实用的助手。本文中我们介绍了如何安装以及如何使用此插件，并提供了示例代码供大家参考。在使用上若有不懂的地方，可以阅读官方文档，它将更详细的为您介绍插件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574181e8991b448d4392