gulp - gulp-dataを使用してJadeでJSONオブジェクトを反復しますか?

Question

ゴール

Gulp を使用して、JSON 配列内の項目を反復処理する Jade テンプレートをレンダリングします。

問題

JSON オブジェクトのフィールドにアクセスできるようにする解決策が思い浮かびません。私は4つの別々のチュートリアルを一言一句たどってきましたが、いつもcannot read property 'length' of undefined.

コード

アイテム.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/'));
});