吞咽任务将JSON和车把从部分合并到HTML中
我正在制作一个简单的概念证明网站，使用JSON作为模板引擎的数据源和工具栏，以便将这两者“合并”到一个静态HTML文件中。
该网站将是非常模块化的，因此每个组件都将使用一个不同的工具栏“分部”构建，它将使用自己的JSON文件中的数据。
到目前为止，我的发展结构如下：
src/
models/
header.json
article.json
footer.json
partials/
header.hbs
article.hbs
footer.hbs
index.hbsindex.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编译-扶手文档建议使用gulp数据支持我所需要的东西，但我很难从gulp数据文档中拼凑出适用于我的具体用例的任何东西。
有人能建议我如何修改我的吞咽文件来完成这个任务吗？
非常感谢。
回答 1
Stack Overflow用户
发布于 2017-07-25 10:12:49
如果我理解这个问题，您可以使用gulp数据从您的模型.json文件返回一个对象，然后将它添加到您的tempateData对象中。
使用gulp数据根据正在处理的工具栏文件将数据对象传递给模板。如果您传递模板数据，这将与对象从吞咽数据扩展。
所以这对我有用。
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文件的名称。
https://stackoverflow.com/questions/39679290
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号