Question

我正在制作一个简单的概念验证网站，使用JSON作为数据源，使用Handlebars作为模板引擎，以期合并＆＃39;将这两件事放入静态HTML文件中。

网站将非常模块化，因此每个组件都将使用不同的Handlebars＆＃39; partial＆＃39;来构建，每个组件将使用自己的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'));
});

到目前为止，它将我的部分内容捆绑在一起，并在名为dist/index.html的文件中以HTML形式输出所有内容。

缺少的是JSON数据部分。目前，部分使用的JSON数据是在gulp文件（变量templateData）中定义的，但我希望每个部分都使用来自src/models JSON文件的数据来提供清晰的分离。 JSON文件的名称将与其所使用的.hbs部分名称相同。

我不清楚如何解决这个问题。 gulp-compile-handlebars documentation建议使用gulp-data将支持我所需要的内容，但我正努力拼凑出适用于我的特定用例的gulp-data documentation中的任何内容。

有人可以建议我如何修改我的gulp文件来实现这个目标吗？

非常感谢。

Answer 1

如果我理解了这个问题，你可以使用gulp-data从你的模型.json文件中返回一个对象，它将被添加到你的tempateData对象中。

使用gulp-data将数据对象传递给模板正在处理的把手文件。如果您传入模板数据将使用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文件的名称。

Gulp任务将JSON和Handlebars从partials合并到HTML中

1 个答案: