Question

我正在使用Handlebars和Gulp构建一个静态站点。这是我的文件夹结构：

// AJAX CALL HERE
success: function(location) {
    $('.profile-cover-wrapper').css("background-image", "url("+location+")");
}

home.hbs的内容是：

app/
    content/
        intro.json
        header.json
        faq.json
        features.json
        footer.json
    templates/
        home.hbs
        partials/
            home-section.hbs
            header.hbs
            footer.hbs
    index.html
Gulpfile.js

我想将<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> </head> <body> {{> header}} {{> home-section}} {{> home-section}} {{> home-section}} {{> footer}} </body> </html>，intro.json和faq.json传递给每个features.json部分，home-section传递给header.json， header页脚。

到目前为止，这是我在Gulpfile中的内容：

footer.json

我一直无法弄清楚如何一次传递多个JSON文件，特别是var gulp = require('gulp'); var handlebars = require('gulp-compile-handlebars'); var rename = require('gulp-rename'); gulp.task('html', function() { return gulp.src('./app/templates/*.hbs') .pipe(handlebars({}, { ignorePartials: true, batch: ['./app/templates/partials'] })) .pipe(rename({ extname: '.html' })) .pipe(gulp.dest('build')); });。提前谢谢！

Answer 1

handlebars的第一个参数是您的全局上下文，可供所有模板使用。您可以将单个JSON文件加载到上下文对象中，并将其用作第一个参数。

（确实有更好的方法可以做到这一点，但是嘿，它快速而简单！）

var infoData = require('./app/content/info.json');
var faqData = require('./app/content/faq.json');
var featuresData = require('./app/content/features.json');

然后，您可以通过全局上下文将这些对象传递给您的把手功能

.pipe(handlebars({ info: infoData, faq: faqData, features: featuresData }))

一旦数据在您的上下文中，您可以像这样访问它：

{{> home-section content=info }}
{{> home-section content=faq }}
{{> home-section content=features }}

在home-section部分内，您将拥有一个content对象，该对象将包含您传入其中的文件的数据。因此，如果您的info.json文件如下所示：

{ "header": "Info", "details": "This is some information" }

您的home-content.hbs部分可以访问这样的数据：

<h2>{{ content.header }}</h2>
<p>{{ content.details }}</p>

Answer 2

不幸的是，gulp-compile-handlerbars函数只需要two arguments，第一个是传递到模板中的所有数据。这意味着您必须将所有json文件一起加载并将它们作为单个对象传递。

您可以使用以下小帮手执行此操作：

function requireJsons(fileNames) {
  return fileNames.reduce(function(jsons, fileName) {
    jsons[fileName] = require('app/content/' + fileNames[i] + '.json');
    return jsons;
  }, {});
}

您可以使用它为所有模板构建数据对象：

var data = requireJsons(['intro', 'header', 'faq', 'features', 'footer']);

gulp.task('html', function() {
  return gulp.src('./app/templates/*.hbs')
    .pipe(handlebars(data, {
      // ...

如果您总是需要从app/content目录加载所有json文件，可以使用readdirSync获取所有.json文件名，然后将它们传递给requireJsons：

var path = require('path');
var fileNames = fs.readdirSync('app/content')
  .filter(function(fileName) {
    return path.extname(fileName) === '.json';
  });
var data = requireJsons(fileNames);

当然，如果速度很重要，您可以将两者合并为一个加载jsons的方法，并在一次传递中构建data对象。

另一个选择是可能单独编译每个模板并将适当的数据传递到每个编译中。像gulp-foreach这样的工具会有所帮助。

如何使用Gulp将部分中的JSON和Handlebars组合成HTML？

2 个答案: