【问题标题】：Iterate a JSON object in Jade using gulp-data?使用 gulp-data 在 Jade 中迭代 JSON 对象？
【发布时间】：2016-06-08 08:23:52
【问题描述】：

目标

使用 Gulp 呈现一个迭代 JSON 数组中的项目的 Jade 模板。

问题

尽我所能，我想不出一个可以让我访问 JSON 对象中的字段的解决方案。我逐字逐句地学习了 4 个单独的教程，我总是以 cannot read property 'length' of undefined 结束。

代码

items.json

{
    "wishlistItems": [
        {
            "name": "Boots",
            "price": 69.95,
            "notes": "Size 10"
        }
    ]
}

index.jade

doctype html
html
    body
        ul
            each item in wishlistItems
                li=item.name

gulpfile.js

const gulp = require('gulp');
const jade = require('gulp-jade');
const data = require('gulp-data');

gulp.task('default', ['build-jade']);

gulp.task('build-jade', () => {
    gulp.src('./src/index.jade')
        .pipe(data(file => require('./src/items.json')))
        .pipe(jade({locals: {}}))
        .pipe(gulp.dest('./dist/'));
});

【问题讨论】：

标签： gulp pug pugjs

【解决方案1】：

与gulp-jade documentation 所说的相反，当您在乙烯基文件对象is ignored 上提供locals 选项全部data 时。

这意味着以下工作：

gulp.task('build-jade', () => {
  gulp.src('./src/index.jade')
    .pipe(data(file => require('./src/items.json')))
    .pipe(jade())
    .pipe(gulp.dest('./dist/'));
});

如果您想同时提供静态locals 和每个文件data，请参阅gulp-jade documentation 中与gulp-data 一起使用 下的第三个代码示例。

【讨论】：