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"
        }
    ]
}

索引.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文档所说的相反，所有乙烯基文件对象都被忽略。localsdata

这意味着以下工作：

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

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