Question

我想使用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中？

Answer 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编译时，使用相同的模板创建两个单独的电子邮件，并使用自己的标题。

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

1 个答案: