简介
在前端开发中，有许多任务需要进行模板渲染，比如对静态网页、邮件模板等进行处理。而 gulp-nunjucks-render 是一个专门为 nunjucks 模板引擎提供的 Gulp 包，能够帮助我们在 Gulp 中使用 nunjucks 进行模板的组织和渲染。
安装
在使用 gulp-nunjucks-render 前需要确保本地系统已安装 Node.js 和 Gulp。
- 安装节点模块：
--- ------- --------------------
- 在 Gulpfile.js 中进行配置：
----- ---- - ----------------
----- -------------- - --------------------------------
------------------- ---------- -
------ --------------------------------
----------------------
----- ------------------
---
-------------------------
---第一行引入了 gulp 模块，第二行引入了 gulp-nunjucks-render 模块。之后定义了一个 Gulp 任务 render。该任务从 src/templates 目录下读取 .html 文件，进行 nunjucks 渲染，渲染后将该文件导出到 dist 目录中。
API
流程图：src → nunjucks → dist
nunjucksRender(options)
该函数是 gul-nunjucks-render 的主要函数，它把数据和模板进行渲染并生成 HTML。options 是一个对象，参数及参数说明如下：
data: 将会编译读取进来的文件中的数据对象。
inheritExtension: 是否继承路径中已有的文件扩展名，默认为 false。
envOptions: 定义 nunjucks 环境配置的对象。
manageEnv: 是否返回已存在的 env 对象，默认为 false。
ext: 所有被处理文件的文件扩展名。
path: 用于在渲染时查找模板的路径字符串或字符串数组。
engine: nunjucks 引擎对象。
示例
在执行完上文中的安装配置后，可以进行以下示例：
---- ------------------------ --- -- ------- ------------------- -- -- ----- ---- -- ------ ----- ------- -- -------- --
---- ------------------------------- ---
--------- -----
------
------
----- ----------------
--------- ----- ----- ---- -------- ----------
-------
------
-- ------- ---------------------- --
-- ----- ---- ---- -------- --
-- ------- ---------------------- --
-------
------- ---- ---------------------------------- ---
--------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
--------- ---- ---------------------------------- ---
--------
--------- -- --------
---------在执行 gulp render 的时候，可以得到以下结果：
---- --------------- ---
--------- -----
------
------
----- ----------------
--------- ------------
-------
------
--------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------
--------- ----------
--------
--------- -- --------
---------
-------
-------结论
gulp-nunjucks-render 是一个很好的实现 nunjucks 模板引擎的 Gulp 包，我们可以通过它来处理 sumk 各种模板并生成我们需要的 HTML。它使用简单，易于上手，但其核心是对模板引擎本身的了解，所以在使用它之前需要对 nunjucks 进行一定的学习。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79196