Fatal编程技术网
  • gulp/
  • 将JSON和把手从片段合并到HTML的Gulp任务

将JSON和把手从片段合并到HTML的Gulp任务

gulp

将JSON和把手从片段合并到HTML的Gulp任务,gulp,handlebars.js,gulp-data,gulp-compile-handlebars,Gulp,Handlebars.js,Gulp Data,Gulp Compile Handlebars,我正在制作一个简单的概念验证网站，使用JSON作为数据源和模板引擎的手柄，以期将这两个东西“合并”到一个静态HTML文件中 该网站将是非常模块化的，因此每个组件将使用一个独特的手柄“partial”构建，每个手柄将使用自己的JSON文件中的数据 到目前为止，我的发展结构如下： src/ models/ header.json article.json footer.json partials/ header.hbs

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

该网站将是非常模块化的，因此每个组件将使用一个独特的手柄“partial”构建，每个手柄将使用自己的JSON文件中的数据

到目前为止，我的发展结构如下：

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

    partials/
        header.hbs
        article.hbs
        footer.hbs

    index.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test App</title>
</head>
<body>
    {{> header}}
    {{> article}}
    {{> footer}}
</body>
</html>
index.hbs文件的内容如下所示：

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

    partials/
        header.hbs
        article.hbs
        footer.hbs

    index.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test App</title>
</head>
<body>
    {{> header}}
    {{> article}}
    {{> footer}}
</body>
</html>
我有下面的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数据部分。目前，partials使用的JSON数据是在gulp文件（变量
templateData
）中定义的，但我希望每个partials都使用
src/models
JSON文件中的数据，以提供清晰的分离。JSON文件的名称将与它所使用的
.hbs
部分文件的名称相同

我不清楚该怎么办。这表明，使用gulp数据将支持我所需要的，但我正在努力拼凑出适合我的特定用例的数据

有谁能建议我如何修改我的gulp文件来实现这一点

非常感谢。

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

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

这不是问题的答案，但问题的解决方案是放弃
gulp编译车把
和
gulp数据
，改用
gulp hb
，这允许将JSON对象数组传递到模板中，并且通常更适合我正在做的事情。嗨@Dan，我遇到了同样的问题，希望看到您找到的解决方案作为问题的答案发布。谢谢感谢@Dan对半解决方案的评论！希望得到某种更深入的答案。您不指定如何从模板文件访问传递的对象。