Как добавить json всех файлов в каталоге c gulp-data?

Question

[Сергей Махленко]

Ребят, помогите добавить все json файлы в gulp-data для последующего использования в шаблонах twig.
К сожалению, опыта работы с gulp не так много, один раз настроил и работал. А тут захотелось улучшить.

Делаю так:

'use strict';

var gulp        = require('gulp'),
    data        = require('gulp-data'),
    path        = require('path'),
    fs          = require('fs'),
    twig        = require('gulp-twig'),
    plumber     = require('gulp-plumber'),

    browserSync = require("browser-sync"),
    reload = browserSync.reload;

var _GLOBAL_PATHS = {
    build  : 'app-public/',
    source : 'app-source/'
}

var config = {
    server: {
        baseDir: _GLOBAL_PATHS.build
    },
    tunnel: true,
    host: 'localhost',
    port: 8080,
};

var PATHS = {
    BUILD : {
        html   : _GLOBAL_PATHS.build
    },

    SOURCE : {
        twig   : _GLOBAL_PATHS.source + 'app-twig/*.twig',
    },

    WATCH : {
        twig   : _GLOBAL_PATHS.source + 'app-twig/**/*.twig',
    }
};

/* ------------------------------------------------------------ */

// .....

gulp.task('twig:build', function () {
    gulp.src(PATHS.SOURCE.twig)
        .pipe(plumber())
        /* тут пытаюсь решить свою задачу */
        .pipe(
            gulp.src('./app-source/app-data/*.json')
                .pipe(data(function(file) {return JSON.parse(fs.readFileSync(file.path)); }))
            )
        /* -------------------- */

        /* Page data - если указывать явно каждый файл, всё работает, но не удобно */
        // .pipe(data(function(file) { return JSON.parse(fs.readFileSync('./app-source/app-data/Globals.json')); }))
        // .pipe(data(function(file) { return JSON.parse(fs.readFileSync('./app-source/app-data/Menu.json')); }))
        /* -------------------- */

        .pipe(twig())
        .pipe(plumber.stop())
        .pipe(gulp.dest(PATHS.BUILD.html))
        .pipe(reload({stream: true}));
});

Ошибка в консоли:

Plumber found unhandled error:
 Error in plugin "gulp-data"
Message:
    SyntaxError: Unexpected token % in JSON at position 1
[02:17:44] Plumber found unhandled error:
 Error in plugin "gulp-data"
Message:
    SyntaxError: Unexpected token < in JSON at position 0

Еще раз обращу ваше внимание, на то, что когда каждый файл добавляю в ручную, всё работает, но это не удобно. Заранее спасибо тем, кто откликнется.

Answer 1

[Сергей Махленко]

Так как ответа нет, решил делать так:

.pipe(data(function(file) { return JSON.parse(fs.readFileSync('./app-source/app-data/Globals.json')); }))
.pipe(data(function(file) { return JSON.parse(fs.readFileSync('./app-source/app-data/' + path.basename(file.path) + '.json')); }))

То есть, 1 файл с json для глобальных данных (что используются на каждой странице). И подгружается в зависимости от страницы, дополнительный файл. Например, если файл страницы с именем News.twig нужно создать в каталоге где хранятся json файлы, файл с названием "News.twig.json".

В общем-то такой подход вполне решает мою проблему. В какой-то степени такой подход даже и лучше.

Answer 2

[Артем Чернявский]

Склеиваем все .json в data.json и закидываем в PATHS.BUILD.html

gulp.task('twig:data', function () {
return gulp.src('./app-source/app-data/**/*.json')
    .pipe(merge({
      fileName: 'data.json',
      edit: (json, file) => {
        var filename = path.basename(file.path),
            primaryKey = filename.replace(path.extname(filename), '');

        var data = {};
        data[primaryKey.toUpperCase()] = json;

        return data;
      }
    }))
    .pipe(gulp.dest(PATHS.BUILD.html));
});

И там где пытаетесь решить задачу:

.pipe(data(function(file) {
      return JSON.parse(fs.readFileSync(`${PATHS.BUILD.html}/data.json`))
    }))

Таск twig:data нужно выполнить перед компиляцией шаблона