Gulp 如何在pug模板中使用JSON变量

zujrkrfu  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(130)

我希望能够创建许多相同的块与不同的数据。例如,列表的项目与不同的名称和价值观。
所以我有一个pug文件是这样的:

- var data = require("data.json")

mixin item(name,val)
    .item
        .item-name= name
        .item-val= val

mixin items(input)
    each itm in input
        +item(itm.name,itm.value)

+items(data)

我的JSON文件data.json如下所示:

[
    {
        "name" : "item1",
        "value": "100"
    },
    {
        "name" : "item2",
        "value": "200"
    },
    {
        "name" : "item3",
        "value": "500"
    }
]

我还想加载不同的json数据,并使用它与我的项目mixin来构建不同的块
但是gulp没有编译这段代码,并在我的pug文件中抛出错误“write after end
我还添加了一些代码与“本地人”为我的大口喝:

gulp.task('site:pug:pages', function() {
    var settings = Config.getTaskSettings('site:pug:pages');

    return gulp.src(BASE_PATH + settings.source)
    // return gulp.src("./html/**/*.pug")
        .pipe(plumber({
        errorHandler: notify.onError()
        }))
        .pipe(pug({pretty: true,locals: {
            require: require
          }}))
        .pipe(gulp.dest(DEST_PATH + settings.dist))
        .pipe(global.browserSync.stream());
});

但这并没有帮助。A知道我可以从gulp任务传递json数据。但有2个问题:
1.我不想通过这些json在gulp任务,因为如果我有新的文件,我应该把它写在gulp任务文件。
1.这也不起作用,并抛出相同的“write after end”错误
在pug模板中使用JSON数据有什么简单的方法吗

nmpmafwu

nmpmafwu1#

我使用parcel来完成这项工作。
首先获取pug.config.js文件上的json文件(如果你不知道这个配置文件,请看这里)

const dataFile = require("./data.json");

module.exports = {
  locals: {
    dataVariable: dataFile,
  }
};

例如,在index.pug上,我使用each循环显示JSON文件中someData数组中包含的ID's

each data in dataVariable.someData
  li= data.ID

使用了data.json文件。

{
  "someData": [
    {
      "ID": "xrHLZ",
    },
    {
      "ID": "ar23D",
    }
  ]
}

相关问题