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

【问题标题】：Multiple Nunjucks files with different JSON data using gulp使用 gulp 具有不同 JSON 数据的多个 Nunjucks 文件
【发布时间】：2017-10-01 00:37:30
【问题描述】：

我想使用 gulp 和 Nunjucks 一次生成多个具有不同内容的模板文件。这些模板都将具有完全相同的布局，但为文本/图像传递不同的变量。

我能够成功生成单个 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 循环并为找到的每个对象创建一个单独的文件吗？如：

data.json

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

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

【问题讨论】：

我从来没有使用过 gulp-data 或 nunjucks 所以....但是如果不想像 gulp-data 示例那样为每个文件创建单独的文件，如何在您的data.json 文件，将文件名与“标题”联系起来，然后在模板中使用 {title-basename}。您的 data() 将检查当前的 path.basename，将其添加到 title+path.basename 并从 data.json 返回。

标签： json gulp nunjucks gulp-nunjucks-render gulp-data

【解决方案1】：

找到了执行此操作的方法：在每个 Nunjucks 索引文件中，我将名为 email 的变量设置为文件名，并使用与文件名匹配的新对象更新了我的 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 编译时，会使用相同的模板创建两封具有自己标题的单独电子邮件。

【讨论】：