在Jade中使用gulp data迭代JSON对象？

Question

目标

使用Gulp来呈现一个Jade模板，该模板遍历JSON数组中的项。

问题

尽管我可能会尝试，但我无法找到允许我访问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/'));
});

Answer 1

与文档所说的相反，当您在乙烯基文件对象被忽略上提供locals选项时，all 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，请参阅第三个代码示例，即Use with gulp-data in 文档。