Цель: скомпилированный индекс. html из небольших файлов мопса, которые используют JSON данные из других файлов.
Это структура моего проекта:
/dist/
--index.html
/src/
--/templates/
----template1.pug
----template2.pug
----index.pug
--/content/
----template1.json
----template2.json
Оба шаблона включены в index.pug:
//index.pug
doctype html
html
head
title Title
body
include template1
include template2
Каждый шаблон имеет похожую структуру
//template1.pug
div
each obj in template1
p= obj.text
//template1.json
[
{
"text": "Lorem"
},
{
"text": "Lorem"
}
]
Я пытался выполнить такую сложную задачу, но безуспешно.
const {watch, src, dest} = require('gulp');
const
pug = require('gulp-pug'),
data = require('gulp-data'),//for attaching data to the file object
fs = require('fs'),
path = require('path'),
const templatesFiles = ["./src/templates/**/*.pug"];
function buildPug() {
return src(templatesFiles)
.pipe(data(file=> {
let jsonFile = './src/content/' + path.basename(file.path, '.pug') + '.json';
return fs.existsSync(jsonFile)? JSON.parse(fs.readFileSync(jsonFile)): {};
}))
.pipe(pug({filename:'index.pug'}))
.pipe(dest('./dist'))
}
exports.buildPug = buildPug;
Похоже на .pipe (pug (имя файла: 'index.pug')) - не фильтровать другие файлы из / templates /. Они были скопированы в / dist /. Есть ли способ справиться с этим?
Также как работать с JSON данными, что я делаю не так.
Большое спасибо. Извините, если было добавлено слишком много деталей.