使用 gulp 具有不同 JSON 数据的多个 Nunjucks 文件

Question

我想使用 gulp 和 Nunjucks 一次生成多个内容不同的模板文件。这些模板都将具有完全相同的布局，但为 text/images.

传递不同的变量

我能够成功生成单个 index.html 文件，但我不确定如何设置它以便一次创建多个文件。这是我所拥有的简化版本：

gulpfile.js

var nunjucks = require('gulp-nunjucks-render');
var data     = require('gulp-data');

gulp.task('nunjucks', function () {
    return gulp
        .src('./src/layouts/**/*.+(html|nunjucks)')
        .pipe(data(function () { return require('./src/data.json'); }))
        .pipe(nunjucks({ path: ['./src/templates'] }))
        .pipe(gulp.dest('./dist'));
});

layout.nunjucks

<head>
    {% block title %} {% endblock %}
</head>

index.nunjucks

{% extends "layout.nunjucks" %}

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

data.json

{
    "title": "DEFAULT"
}

更改此工作流程以生成多个文件且每个文件都有不同标题的最佳方法是什么？

我发现我可以创建多个 index.nunjucks 文件，但看起来它们都使用相同的 data.json 文件。我也不想为每个文件制作一个单独的 JSON 文件。

我可以在我的 data.json 文件中添加一个数组，让 Nunjucks 循环并为找到的每个 object 创建一个单独的文件吗？比如下面的：

data.json

{
    "files": [{
        "title": "DEFAULT",
    }, {
        "title": "DEFAULT #2"
    }]
}

或者有没有办法在 index.nunjucks 文件中设置变量而不依赖于将它们存储在 JSON 中？

Answer 1

找到了这样做的方法：在每个 Nunjucks 索引文件中，我将一个名为 email 的变量设置为文件名，并使用匹配的新 object 更新我的 data.json 文件具有自己内容的文件名。

default.nunjucks

{% set email = default %}

{% include "index.nunjucks" %}

test.nunjucks

{% set email = test %}

{% include "index.nunjucks" %}

index.nunjucks

{% extends "layout.nunjucks" %}

{% block title %}
    <title>{{ email.title }}</title>
{% endblock %}

layout.nunjucks

<head>
    {% block title %} {% endblock %}
</head>

data.json

{
    "default":
    {
        "title": "TITLE"
    },
    "test":
    {
        "title": "TEST TITLE"
    }
}

通过 gulp 编译时，会使用相同的模板创建两封单独的电子邮件，标题各不相同。

使用 gulp 具有不同 JSON 数据的多个 Nunjucks 文件

Multiple Nunjucks files with different JSON data using gulp

json

gulp

nunjucks

gulp-nunjucks-render

gulp-data