How to output data from local .json file to Pug markup?

Question

JSON

I have a task - to lay out a page on Pug and insert data from a local data.json file into certain places in the markup. And I don’t understand how to integrate it into the .pug file - somehow through include or use require ? Or maybe there is another way? And then no matter how much I googled - all the infa comes across some kind of contradictory, and in the docks on Pug there is nothing at all on this topic

Answer 1

gulpfile.js

const Gulp = require('gulp');
const Pug = require('gulp-pug');
const Fs = require('fs');

const dataFromFile = JSON.parse(Fs.readFileSync('./data.json'))

// Pug to HTML
Gulp.task('pug', () =>
    Gulp.src('./*.pug')
    .pipe(Pug({
        pretty: true,
        locals: dataFromFile || {}
    }))
    .pipe(Gulp.dest('./build'))
);

data.json

{
  "sections": {
    "html": {
      "name": "HTML",
      "color": "#e44d26"
    }
  }
}

*.pug
or
.test #{sections.html.color}