如何在Gulp中使用Assemble从数据创建页面？

Question

我目前正在使用Gulp作为一个项目的构建工具。Gulp任务之一使用Assemble将Handlebar页面/布局组装成HTML：

var assemble = require('assemble')();

gulp.task('assemble', ['clean'], function () {
    assemble.partials('./partials/**/*.hbs');
    assemble.layouts('./layouts/**/*.hbs');
    assemble.pages('./pages/**/*.hbs');

    loadHelpers(); // Calls assemble.helpers(...) on some Handlebars helpers

    var data = require('./hbs_context.json');
    assemble.data(data);
    assemble.data({root: process.cwd()});

    return assemble.toStream('managements')
        .pipe(assemble.renderFile())
        .pipe(plugins.extname()) // Converts .hbs to .html
        .pipe(gulp.dest('.tmp/'));
});

我遇到了我的项目的一部分，它需要从一个数据数组创建多个页面，其中该数组的每个对象都是单独页面的上下文。

同样的问题已经被提出和回答了很多次：

How can I generate multiple pages from a JSON file with Assemble

Assemble: How can I generate pages from json/yaml?

grunt assemble multiple files from one datafile

https://github.com/assemble/assemble/issues/236

https://github.com/assemble/assemble/issues/184

https://github.com/assemble/assemble/pull/234

然而，所有提供的解决方案都使用Grunt选项，我不知道如何在Gulp中做同样的事情。那么，在Gulp中有没有等效的方法来做这件事呢？

Answer 1

我刚刚开始安装Assemble，它似乎在gulp中运行没有问题。这个depreciated NPM plugin展示了它是如何完成的，请注意不同之处：

使用Gulp组合

​

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var app = assemble();
 
gulp.task('load', function(cb) {
  app.partials('templates/partials/*.hbs');
  app.layouts('templates/layouts/*.hbs');
  app.pages('templates/pages/*.hbs');
  cb();
});
 
gulp.task('assemble', ['load'], function() {
  return app.toStream('pages')
    .pipe(app.renderFile())
    .pipe(htmlmin())
    .pipe(extname())
    .pipe(app.dest('site'));
});
 
gulp.task('default', ['assemble']);

​

不带Gulp的装配

​

var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var app = assemble();
 
app.task('load', function(cb) {
  app.partials('templates/partials/*.hbs');
  app.layouts('templates/layouts/*.hbs');
  app.pages('templates/pages/*.hbs');
  cb();
});
 
app.task('assemble', ['load'], function() {
  return app.toStream('pages')
    .pipe(app.renderFile())
    .pipe(htmlmin())
    .pipe(extname())
    .pipe(app.dest('site'));
});
 
app.task('default', ['assemble']);

​

Assemble可以毫无问题地使用所有Gulp插件。

如果您想了解更多信息，请查看此讲座：https://www.youtube.com/watch?v=R9kOy2e5koE

到目前为止，我发现您可以像这样插入数据：

app.task('load', function(cb) {
  app.data('templates/data/*.json');
  app.partials('templates/partials/*.hbs');
  app.layouts('templates/layouts/*.hbs');
  app.pages('templates/pages/*.hbs');
  cb();
});

它必须是“加载”任务中的第一个。