Как подключить файл json к файлу pug?

Question

[FlapJalc]

В проекте используется следующая структура файлов:

|--modules
|----module1
|------module1.pug
|------module1.json
|----module2
|------module2.pug
|------module2.json

Затем все модули подключаются к index.pug черех инклюд

|--pages
|----index.pug

И в gulpfile, все pugфайлы компилируются в html, и складываются в директорию dist

gulp.task("html", function() {
  return gulp.src("src/pages/*.pug")
    .pipe(plumber())
    .pipe(pug())
    .pipe(gulp.dest("dist"))
});

Всё стандартно, просто, без замудренного кода.
Но, как теперь мне сделать, чтобы файл module1.json подключился к файлу module1.pug, module2.json к module2.pug, и так далее. Ни в одном уроке на ютубе, ни в одной статье в гугле, я не смог найти как это реализовать. Неужели считывание данных из json это так не востребовано, и непопулярно? Надеюсь здесь мне помогут.

Comments

[r_mustang]

считывание данных из json файлов делается с помощью ajax

[Олег]

Неужели считывание данных из json это так не востребовано, и непопулярно?

Популярно, но это же элементарно, читаем все json файлы -> формируем объект -> отправляем в PUG

[FlapJalc]

Олег, но тем не менее везде я вижу примеры только со считыванием данных из одного общего json файла, который прописывается в таксе gulp. Может у Вас есть пример где реализованно именно поочередное чтение всех json файлов из всех папок и подкаталогов?

[Олег]

FlapJalc, у меня в сборке такое есть, можете найти и выдрать, хотя написать самому будет быстрее, тут две функции по сути нужны fs.readdirSync и fs.readFileSync

[FlapJalc]

Олег, так у меня в таксе используется эта функция, только она указывает на конкретный файл json.

.pipe(pug({
      locals : {
        socials: JSON.parse(fs.readFileSync('src/modules/socials/socials.json', 'utf8')),
      }
     }))

И если мне нужно добавить будет ещё один json, то снова придется добавлять для него путь. Я пробовал на место пути написать src/modules/**/*.json, но выдавало cannot json. Знаю, это тупо, но у меня пока недостаточно знаний в node. Теперь как мне подсказывает моя логика, нужно каким то образом использовать функцию fs.readfileSync внутри fs.readdirSync

Answer 1

[Олег]

const fs = require( 'fs' )
const path = require( 'path' )

const data = {}
const dir = 'src/modules/'

try {

	const modules = fs.readdirSync( dir )

	modules.forEach( item => {

		const module = path.join( dir, item )

		if ( ! fs.lstatSync( module ).isDirectory() ) return

		const jsons = fs.readdirSync( module ).filter( item => path.extname( item ) === '.json' )

		jsons.forEach( json => {

			const name = path.basename( json, path.extname( json ) )
			const file = path.join( dir, item, json )

			data[name] = JSON.parse( fs.readFileSync( file ) )

		})

	})

} catch (e) {

	console.log(e)

}

// далее отправляем данные в PUG (будет глобальный объект jsons)

gulp.task("html", function() {
  return gulp.src("src/pages/*.pug")
    .pipe(plumber())
    .pipe(pug({locals: {jsons: data}}))
    .pipe(gulp.dest("dist"))
});

Comments

[FlapJalc]

Большое спасибо за помощь. Я конечно по незнанию представлял себе реализацию несколько короче, буквально в двух трех строчках. Но реальность такова) Буду учить node.

[citizen404]

Можете уточнить, а как именно обращаться к глобальному объекту jsons из pug-шаблонов? Как синтаксически это оформить?

[Олег]

citizen404,

// data.json
{
  "greeting": "Hello, world!"
}

h1= jsons.greeting