在日常的前端开发中，我们经常需要使用模板引擎来处理页面渲染逻辑，而 nunjucks 就是其中一款比较流行的模板引擎之一。而为了简化使用 nunjucks 的方式，开发者们开发了许多 nunjucks 相关的工具和插件，其中，nunjucks-brunch 就是一款非常实用的工具。在本篇文章中，我们将详细介绍如何在项目中使用 nunjucks-brunch。
nunjucks-brunch 简介
nunjucks-brunch 是对 Brunch/Node.js 环境下 nunjucks 的自动编译包。该工具可自动监视模板文件的变化，并在模板修改后重新编译模板文件。同时，该包支持在模板中引入 partial，使得开发者可以更加方便的组合模板文件。
安装
要使用 nunjucks-brunch，我们首先需要安装 Brunch 和 nunjucks-brunch。
安装 Brunch：
npm install -g brunch
安装 nunjucks-brunch：
npm install --save-dev nunjucks-brunch
配置
在 project 根目录下，创建一个名为 brunch-config.js 的文件，用来配置使用 nunjucks-brunch。
在该配置文件中，我们需要进行如下配置：
- 设置
templates：告诉 nunjucks-brunch 需要编译的模板文件存放位置。 - 设置
plugins：告诉 Brunch 需要使用的插件。 - 设置
overrides：告诉 Brunch 生成的 js 文件存放的位置和文件名以及如何将 nunjucks 中的 partial 合并到一个文件中。
示例配置：
-- -------------------- ---- -------
-------------- - -
-- ------
------ -
------------ -
------- --------
--
------------ -
------- ---------
-
--
-- ----- -------- --------
---------- -
------- --------
--
-- -----
-------- -
--------- -
----------- -----
-
--
-- - -------- -- ------- --- ---------------- -
-- ----- ------------------ -- ------- ----
---------- -
---------- -
------- ------------------
--
--------- -
------ -
------------------------ -------------------- --------------------------
-
-
-
-编写模板
在 nunjucks-brunch 中，我们可以通过类似如下的代码片段来导入并使用 partial。注意每个 partial 都需要编译到相应的位置，以便能够在其它模板中引用。
{% import 'partials/header.nunjucks' as header %}
{{ header.render(title) }}
{% import 'partials/footer.nunjucks' as footer %}
{{ footer.render() }}示例
在这个示例中，我们将使用 nunjucks-brunch 和 Brunch 编译器来将一个项目的 html 模板编译成一个可部署的静态网站。我们将编写两个 partial：一个用于呈现 header，一个用于呈现 footer。然后，我们将创建一个基本的 html 文件，将 header 和 footer 导入到其中，最后编译并部署该静态网站。
安装 Brunch 和 nunjucks-brunch
在命令行中输入以下命令来安装 Brunch 和 nunjucks-brunch：
npm install -g brunch npm install --save-dev nunjucks-brunch
编写两个 partial
创建一个名为 partials/header.nunjucks 的文件，并将以下代码粘贴到其中：
-- -------------------- ---- -------
--------
------ ----- -------
-----
----
------ ----------------------
------ ----------------------
------ -------------------------
-----
------
---------创建一个名为 partials/footer.nunjucks 的文件，并将以下代码粘贴到其中：
-- -------------------- ---- -------
--------
-----
----
------ ----------------------
------ ----------------------
------ -------------------------
-----
------
--------- ---- ---- -------
---------编写 html 文件
创建一个名为 index.nunjucks 的文件，并将以下代码粘贴到其中：
-- -------------------- ---- -------
-- ------ -------------------------- -- ------ --
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----------
-------
------
-- -------------------- --
-------- ----- ------
------- ------- ---- ---------
----
-------- ----- ------
------- ------- ---- ---------
-- --------------- --
-------
-------
-- ------ -------------------------- -- ------ --配置 brunch-config.js
在 project 根目录下，创建一个名为 brunch-config.js 的文件，并将以下代码粘贴到其中：
-- -------------------- ---- -------
-------------- - -
-- ------
------ -
------------ -
------- --------
--
------------ -
------- ---------
-
--
-- ----- -------- --------
---------- -
------- --------
--
-- -----
-------- -
--------- -
----------- -----
-
--
-- - -------- -- ------- --- ---------------- -
-- ----- ------------------ -- ------- ----
---------- -
---------- -
------- ------------------
--
--------- -
------ -
------------------------ -------------------- --------------------------
-
-
-
-运行 Brunch 编译
运行以下命令以执行 Brunch 编译：
brunch build
部署
在命令行中输入以下命令，以在 localhost:3333 上运行该静态网站。
brunch watch --server
在浏览器中输入 localhost:3333，打开部署结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66c8e