前言
在前端开发过程中，使用一些现成的工具可以极大地提高生产效率和代码质量。Broccoli-pug2 是一款可以将 Pug（原名 Jade） 模板转译成 HTML 的 npm 包，它具有简单易用、高效稳定、灵活可定制等优点。
如果你之前没有使用过 Broccoli-pug2 或 Pug，那么本文会循序渐进地为你展示如何使用，如果你已经有了一定的使用经验，本文的一些高级定制用法也可能对你有帮助。
安装 broccoli-pug2
在使用 broccoli-pug2 之前，需要先安装 broccoli 和 broccoli-pug2，这可以通过 npm 完成。
npm install broccoli broccoli-pug2 --save-dev
使用 broccoli-pug2
假设你有一个 Pug 模板文件 index.pug，文件内容如下：
html
head
title Hello, World!
body
h1 Hello, World!那么可以通过以下代码将其转译为 HTML 文件：
-- -------------------- ---- ------- ----- --- - ------------------------- ----- ------ - ------ ----- ----------- - ------- ----- ---- - ----------- - -------- ------- ---------- ------ --- -------------- - -----
上述代码的意义如下：
source：Pug 模板文件所在的根目录；destination：输出文件的根目录；basedir：指定 Pug 的基础目录，如果省略，则默认为process.cwd()，即当前命令行所在目录；extension：指定模板文件的扩展名，默认为.pug。
将代码保存为 Brocfile.js 或 Brocfile.coffee，然后在命令行中输入以下命令就可以生成 HTML 文件：
broccoli build dist
生成的 HTML 文件如下：
-- -------------------- ---- -------
--------- -----
------
------
------------- --------------
-------
------
---------- -----------
-------
-------可以看到，Pug 模板已经成功地被转译成了 HTML。
学习和指导意义
使用 broccoli-pug2 可以大量减少手写 HTML 的时间，提高生产效率，并且由于模板是基于缩进的，所以可以自然而然地规范代码风格，减少语法错误。此外， broccoli-pug2 还提供了丰富的选项，可以满足不同场景的需求，是一个非常实用的 npm 包。
示例代码
完整的示例代码及文件结构如下：
.
├── Brocfile.js
└── src
└── index.pugBrocfile.js：
-- -------------------- ---- ------- ----- --- - ------------------------- ----- ------ - ------ ----- ----------- - ------- ----- ---- - ----------- - -------- ------- ---------- ------ --- -------------- - -----
src/index.pug：
html
head
title Hello, World!
body
h1 Hello, World!执行以下命令即可生成 HTML 文件：
broccoli build dist
输出文件结构如下：
.
└── dist
└── index.html来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50a9