Running Handlebars multiple times within a Gulp task

Question

I'm trying to create a Gulp task that applies two Handlebars processes to a src.
The first process uses an external JSON data source and populates a template. Then for an additional process, I want to parse another expression in the template with a value calculated in my gulpfile. The resulting template is then renamed and output to a destination.

Each process works independently but when I try to combine them into a single task only the first Handlebars process is run.

gulp.src('handlebars/pagetemplate.hbs')
  .pipe( handlebars(dataSrc1, options) )
  .pipe( handlebars(dataSrc2, options) )   
  .pipe( rename('page.html') )
  .pipe( gulp.dest('outputfolder/') );

Have I misunderstood how Gulp's pipe stream works? I have had the idea to merge the two JSON sources first and then parse with Handlebars but I'm unsure on the syntax for this in the above context.

score 3 · Accepted Answer · answered Mar 31 '16 at 16:25

The reason your code doesn't work is because after the first handlebars() you no longer have a Handlebars template in your stream. All the {{placeholder}} expressions have been replaced and you're left with nothing but HTML. So the second handlebars() can't actually do anything anymore.

I have had the idea to merge the two JSON sources first and then parse with Handlebars

That's the correct approach.

Say your first data source is a file data.json and the second is computed in your Gulpfile. You can use the merge package to merge the two:

var merge = require('merge');

gulp.task('default', function() {
   var dataSrc1 = require('./data.json');
   var dataSrc2 = {
      count: 40 + 2
   };

   var dataSrc = merge.recursive(true, dataSrc1, dataSrc2);

   return gulp.src('handlebars/pagetemplate.hbs')
     .pipe(handlebars(dataSrc, options))
     .pipe(rename('page.html'))
     .pipe(gulp.dest('outputfolder/'));
});

Thanks - good to know I was on the right track in the end! That solution worked perfectly. — Frank Furter, Apr 01 '16 at 14:55

score 0 · Answer 2 · answered Mar 31 '16 at 14:57

0

You probably need to merge two pipes / streams :

// npm install --save-dev gulp merge-stream

var gulp = require('gulp');
var merge = require('merge-stream');

gulp.task('test', function() {
  var bootstrap = gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'));

  var jquery = gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'));

  return merge(bootstrap, jquery);
});

Proudly copied from Gulpjs - using-multiple-sources-in-one-task

answered Mar 31 '16 at 14:57

jacmoe

1,637
13
17

Thanks but I'm not sure if this is what I'm looking for. With the example you've given, it's merging two instances of gulp streams. Can this be used in the same way for merging two JSON sources? E.g. `var combined_json = gulp.src(dataSrc1) .pipe(merge(dataSrc2))` If I'm on the right track, do I need to output the resulting combined JSON to a file with gulp.dest or can I store as a variable? – Frank Furter Mar 31 '16 at 15:43
1

My example would work with two handlebars processes - for merging two JSON sources, you need a different approach. I am not a Node.js expert, though. :) – jacmoe Mar 31 '16 at 16:00
Ah yes, of course. Sorry I was getting hung up on my second train of thought! – Frank Furter Mar 31 '16 at 20:51

Running Handlebars multiple times within a Gulp task

2 Answers2