前言
在前端开发中, 我们经常会遇到需要使用模板引擎进行数据渲染的需求, nunjucks 就是其中一种被广泛使用的模板引擎. 而 @superflycss/task-nunjucks 是一个可以在 Gulp 中使用 nunjucks 进行模板渲染的插件, 接下来我们将详细介绍该插件的使用方法.
安装
使用 npm 进行安装:
npm install --save-dev @superflycss/task-nunjucks
用法
在 Gulp 中使用 @superflycss/task-nunjucks 非常简单, 首先在 Gulpfile 中引入该插件:
const nunjucksRender = require('@superflycss/task-nunjucks');然后, 我们需要创建一个 task 来使用该插件进行 nunjucks 模板渲染. 比如, 我们需要渲染 src 目录下的所有 nunjucks 模板文件，并将渲染后的文件放置到 dist 目录下, 我们可以这样定义任务:
-- -------------------- ---- -------
--------------------- -- -- -
------ -------------------------
----------------------
----- -
------ ---------------
-------- ---------------------
-
---
-------------------------
---这里需要解释一下 **/*.nunj 所代表的意义. ** 表示匹配任意级子目录, * 则表示匹配任意文件名, .nunj 表示匹配以 .nunj 结尾的文件, 所以 **/*.nunj 就可以匹配 src 目录下的所有 nunjucks 模板文件了.
在 nunjucksRender 方法中, 我们可以通过 data 选项来传递变量给模板文件, 格式类似于 Vue.js 或 React 中传递数据到组件中的 props.
通过上面的代码, 我们就可以实现在 Gulp 中使用 nunjucks 渲染模板文件了.
更多配置
@superflycss/task-nunjucks 还支持更多的配置选项, 例如:
ext
改变文件后缀名，默认是 .html。
.pipe(nunjucksRender({
ext: '.php'
}))path
定义 nunjucks 模板所在目录，可以定义多个。
.pipe(nunjucksRender({
path: ['src/templates/', 'src/templates2/']
}))manageEnv
自定义 nunjucks 的 Environment，可以进行更多配置，例如添加 filter。
const njkEnv=require('./njkEnv.js');
.pipe(nunjucksRender({
manageEnv: njkEnv
}))示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ----------
-------
------
------- ------- --------
-------
--------- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - --------------------------------------
--------------------- -- -- -
------ -------------------------
----------------------
----- -
------ ---------------
-------- ---------------------
-
---
-------------------------
---
-------------------- --------------结束语
@superflycss/task-nunjucks 插件可以让我们在 Gulp 中更加方便地使用 nunjucks 模板引擎进行文件渲染, 从而提升我们的开发效率. 它的使用也十分简单，只需要根据上面的用法即可轻松上手.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1b81e8991b448dab22