1

我希望使用 Gulp 使用 gulp -nunjucks或gulp-nunjucks-render呈现我的 Nunjucks 模板呈现我的 Nunjucks 模板。有没有办法可以将一个或一系列 .json 文件传递​​给模板包以在我的 nunjucks 模板中使用 JSON 数据？

理想情况下我会有一个models/目录，每个页面都有相应的 page.json 文件，其中包含要在该模板中使用的内容。

我想知道是否可以使用上述任何一个插件，如果可以，如何实现。单个或一系列 .json 文件的任何示例都将非常有用。

4

2 回答 2

2

研究使用 gulp-data https://www.npmjs.org/package/gulp-data它从任何来源生成 JSON，无论是 JSON 文件还是数据库，通过文件对象（file.data）。您的 nunjucks 插件将需要修改以使用该数据属性。

于 2014-10-18T19:54:38.597 回答
0

这对我有用，但在我的情况下，它并没有完全满足我的需求。使用我的 gulpfile 如下：

//Compile Nunjucks Templates
gulp.task('nunjucks', function() {
    nunjucksRender.nunjucks.configure(['templates/'])
    return gulp.src('src/pages/*.html')
        .pipe(nunjucksRender(nunjucksOptions))
        .pipe(gulp.dest(output.html))
        .pipe(reload({stream:true}));
});

在这里使用 gulp-data 来注入我的 JSON 仅向页面提供数据，而不是向我包含的部分和宏提供数据。在我的例子中，我使用一个中央 JSON 设置文件来模拟，例如，当用户登录时我的前端会是什么样子：

{
    "loggedin":false
}

和

{% if data.loggedin %}
<a href="#" class="nav__item nav__item--login">
    <div class="nav__item--login_img">
        <img src="http://pipsum.com/200x200.jpg" alt="" />
    </div>
    <p class="nav__item--login_user">JohnDoe345</p>
</a>
{% else %}
<a href="#login" data-lity class="nav__item nav__item--login">
    <div class="nav__item--login_cta">Sign In</div>
</a>
{% endif %}

使所有模板/页面/部分/宏/等都可以访问该文件。我正在使用 gulp-nunjucks-render 的manageEnv设置如下：

nunjucksOptions = {
    path: ['src/pages/', 'src/templates/'],
    watch:true,
    manageEnv:function(env){
        var data = JSON.parse(fs.readFileSync('states.json'));
        env.addGlobal('data',data);
    }
}

感谢 Alex Ward 提供的关于使用 fs 防止我的​​ JSON 被缓存的提示。

于 2016-07-18T18:48:00.020 回答