Question

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

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

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

Answer 1

使用gulp-data https://www.npmjs.org/package/gulp-data查看它从任何源生成JSON，无论是JSON文件还是数据库，都通过文件对象（file.data）上的新属性将其发送到流中。您的nunjucks插件需要修改才能使用该数据属性。

Answer 2

这对我有用，但就我而言，它并没有完成我所需要的一切。我的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 %}

使文件可供所有模板/ pages / partials / macros / etc访问。我正在使用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关于tip使用fs来保持我的JSON不被缓存。

提供在Gulp Nunjucks模板中使用的数据模型

2 个答案: