使用gulp-data在Jade中迭代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

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

这意味着以下工作：

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

如果您想同时提供静态locals以及每个文件data，请参阅{{3}中使用gulp-data 下的第三个代码示例}。