在 Gulp 任务中多次运行 Handlebars

Question

我正在尝试创建一个将两个 Handlebars 进程应用于 src 的 Gulp 任务。
第一个过程使用外部 JSON 数据源并填充模板。然后对于一个额外的过程，我想用我的 gulpfile 中计算的值来解析模板中的另一个表达式。 然后将生成的模板重命名并输出到目的地。

每个进程独立工作，但是当我尝试将它们组合成一个任务时，只会运行第一个 Handlebars 进程。

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

我是否误解了 Gulp 的管道流的工作原理？我有想法先合并两个 JSON 源，然后用 Handlebars 解析，但我不确定上述上下文中的语法。

Answer 1

您的代码不起作用的原因是，在第一个 handlebars() 之后，您的流中不再有 Handlebars 模板。所有{{placeholder}} 表达式都已被替换，您只剩下HTML。所以第二个handlebars()实际上不能再做任何事情了。

我的想法是先合并两个 JSON 源，然后用 Handlebars 解析

这是正确的方法。

假设你的第一个数据源是一个文件data.json，第二个是在你的 Gulpfile 中计算的。您可以使用merge 包将两者合并：

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/'));
});

Answer 2

你可能需要合并两个 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);
});

自豪地复制自Gulpjs - using-multiple-sources-in-one-task