Как настроить задачу gulp для многих шаблонов мопса, которые используют данные JSON - PullRequest
0 голосов
/ 01 апреля 2020

Цель: скомпилированный индекс. 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 данными, что я делаю не так.

Большое спасибо. Извините, если было добавлено слишком много деталей.

...