How to create pages from data using Assemble in Gulp?

Question

I'm currently using Gulp as the build tool for a project. One of the Gulp tasks uses Assemble to assemble the Handlebars pages/layouts into 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/'));
});

I've come upon a part of my project which requires multiple pages created from an array of data, where each object of the array would be a context for a separate page.

This same problem has been brought up and answered many times:

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

However, all the solutions provided use Grunt options, and I can't figure out how to do the same thing in Gulp. So, is there an equivalent way to do this in Gulp?

Vladimir Jovanović · Answer 1 · 2017-09-05T14:15:45.403

I have just started to set up Assemble and it seems that it runs without problems in gulp. This depreciated NPM plugin showed how it is done, notice the difference:

Assemble with 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']);

Assemble without 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 can use all Gulp plugins with no problems.

If you want to learn more, check out this lecture: https://www.youtube.com/watch?v=R9kOy2e5koE

So far I have found out that you can insert data like so:

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();
});

It has to be first in the "load" task.

How to create pages from data using Assemble in Gulp?

1 Answers1