2

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

该网站将非常模块化，因此每个组件都将使用不同的 Handlebars 'partial' 构建，每个组件都将使用其自己的 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.

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

我不清楚该怎么做。gulp -compile-handlebars 文档建议使用 gulp-data 将支持我需要的东西，但我正在努力拼凑适用于我的特定用例的gulp-data 文档中的任何内容。

谁能建议我如何修改我的 gulp 文件来完成这个？

非常感谢。

4

1 回答 1

0

如果我理解这个问题，您可以使用 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 文件的名称。

于 2017-07-25T10:12:49.387 回答