npm 包 gulp-nunjucks-render 使用教程

简介

在前端开发中，有许多任务需要进行模板渲染，比如对静态网页、邮件模板等进行处理。而 gulp-nunjucks-render 是一个专门为 nunjucks 模板引擎提供的 Gulp 包，能够帮助我们在 Gulp 中使用 nunjucks 进行模板的组织和渲染。

安装

在使用 gulp-nunjucks-render 前需要确保本地系统已安装 Node.js 和 Gulp。

1. 安装节点模块：

npm install gulp-nunjucks-render

1. 在 Gulpfile.js 中进行配置：

-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - --------------------------------

------------------- ---------- -
  ------ --------------------------------
    ----------------------
        ----- ------------------ 
    ---
    -------------------------
---

第一行引入了 gulp 模块，第二行引入了 gulp-nunjucks-render 模块。之后定义了一个 Gulp 任务 render。该任务从 src/templates 目录下读取 .html 文件，进行 nunjucks 渲染，渲染后将该文件导出到 dist 目录中。

API

流程图：src → nunjucks → dist

nunjucksRender(options)

该函数是 gul-nunjucks-render 的主要函数，它把数据和模板进行渲染并生成 HTML。options 是一个对象，参数及参数说明如下：

1. data: 将会编译读取进来的文件中的数据对象。

2. inheritExtension: 是否继承路径中已有的文件扩展名，默认为 false。

3. envOptions: 定义 nunjucks 环境配置的对象。

4. manageEnv: 是否返回已存在的 env 对象，默认为 false。

5. ext: 所有被处理文件的文件扩展名。

6. path: 用于在渲染时查找模板的路径字符串或字符串数组。

7. engine: nunjucks 引擎对象。

示例

在执行完上文中的安装配置后，可以进行以下示例：

<!-- src/templates/index.html -->
{% extends "layouts/main.html" %}

{% block body %}
  <h1>{{ title }}</h1>
{% endblock %}

-- -------------------- ---- -------
  ---- ------------------------------- ---
  --------- -----
  ------
  ------
    ----- ----------------
    --------- ----- ----- ---- -------- ----------
  -------
  ------
    -- ------- ---------------------- --
    -- ----- ---- ---- -------- --
    -- ------- ---------------------- --
  -------
  -------

-- -------------------- ---- -------
  ---- ---------------------------------- ---
  --------
    -----
      ----
        ------ ----------------------
        ------ ----------------------------
        ------ --------------------------------
      -----
    ------
  ---------

  <!-- src/templates/partials/footer.html -->
  <footer>
    <p>&copy; My Site</p>
  </footer>

在执行 gulp render 的时候，可以得到以下结果：

-- -------------------- ---- -------
  ---- --------------- ---
  --------- -----
  ------
  ------
    ----- ----------------
    --------- ------------
  -------
  ------
    --------
      -----
        ----
          ------ ----------------------
          ------ ----------------------------
          ------ --------------------------------
        -----
      ------
    ---------
    --------- ----------
    --------
      --------- -- --------
    ---------
  -------
  -------

结论

gulp-nunjucks-render 是一个很好的实现 nunjucks 模板引擎的 Gulp 包，我们可以通过它来处理 sumk 各种模板并生成我们需要的 HTML。它使用简单，易于上手，但其核心是对模板引擎本身的了解，所以在使用它之前需要对 nunjucks 进行一定的学习。

参考资料

• gulp-nunjucks-render
• nunjucks
• Gulp

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79196