Задача Gulp для объединения JSON и Handlebars из партиалов в HTML

Question

Задача Gulp для объединения JSON и Handlebars из партиалов в HTML

Я делаю простой веб-сайт для проверки концепции, используя JSON в качестве источника данных и Handlebars для механизма шаблонов, чтобы "объединить" эти две вещи в статический HTML-файл.

Веб-сайт будет очень модульным, поэтому каждый компонент будет построен с использованием "частичного" Handlebars, каждый из которых будет использовать данные из своего собственного файла JSON.

Структура разработки, которая у меня есть, выглядит примерно так:

src/
    models/
        header.json
        article.json
        footer.json

    partials/
        header.hbs
        article.hbs
        footer.hbs

    index.hbs

Содержимое файла index.hbs выглядит примерно так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test App</title>
</head>
<body>
    {{> header}}
    {{> article}}
    {{> footer}}
</body>
</html>

Частицы пока очень просты. например header.hbs содержит:

<header>{{header}}</header>

У меня есть следующий файл gulp gulpfile.js что идет частично к тому, чего я хочу достичь:

var gulp = require('gulp');
var data = require('gulp-data');
var handlebars = require('gulp-compile-handlebars');
var rename = require('gulp-rename');

gulp.task('default', function () {
    var templateData = {
        header: 'Welcome'
    },
    options = {
        batch : ['./src/partials']
    }

    return gulp.src('src/index.hbs')
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('dist'));
});

До сих пор он объединяет мои партиалы и выводит все красиво, как HTML, в файл с именем dist/index.html,

Чего не хватает, так это части данных JSON. В настоящее время данные JSON, используемые частями, определены в файле gulp (переменная templateData) но я хочу, чтобы каждый частичный использовался данные из src/models JSON-файлы для обеспечения четкого разделения. Имя файла JSON будет идентично имени .hbs частичное потребление.

Мне неясно, как это сделать. Документация https://www.npmjs.com/package/gulp-compile-handlebars предполагает, что использование gulp-data будет поддерживать то, что мне нужно, но я изо всех сил пытаюсь собрать воедино что-нибудь из документации gulp-data, которая работает для моего конкретного варианта использования.

Может ли кто-нибудь предложить, как я могу изменить свой файл gulp для достижения этой цели?

Большое спасибо.

2

gulp handlebars.js gulp-data gulp-compile-handlebars

Источник

user405781 24 сен '16 в 17:50

1 ответ

Другие вопросы по тегам gulp handlebars.js gulp-data gulp-compile-handlebars

user1310769 25 июл '17 в 10:12 2017-07-25 10:12 · Answer 1 · 2017-07-25 10:12

Если я понимаю вопрос, вы можете использовать gulp-data для возврата объекта из вашего файла моделей.json, и он будет добавлен в ваш объект tempateData.

Используйте gulp-data для передачи объекта данных в шаблон на основе обрабатываемого файла handlebars. Если вы передадите данные шаблона, они будут расширены объектом из gulp-data.

Так что это сработало для меня.

gulp.task('default', function () {
    var templateData = {
        header: 'Welcome'
    },
    options = {
        batch : ['./src/partials']
    }

    return gulp.src('src/index.hbs')
        .pipe(data(function(file) {
            return require('./src/models/test.json');
        }))
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('dist'));
});

И вы можете изменить путь к вашему файлу.json в соответствии с именем файла src.hbs.