Gulp 吞咽任务-将var传递到下一个管道

我有以下任务

// global criticalCSS
criticalCSS = "";

// Generate & Inline Critical-path CSS
gulp.task('optimize:critical', ['styles'], function() {
  critical.generate({
    base: config.critical.base,
    src: 'index.html',
    css: config.critical.css
    }, function (err, output) {
    // You now have critical-path CSS
      console.log(output);
      criticalCSS = output;
    });
    return gulp.src(config.critical.base + '/*.html')
    .pipe(plumber({
      errorHandler: onError
    }))
    .pipe(
      htmlreplace({
        'criticalCss': '<style>' + criticalCSS + '</style>',
      })
    )
    .pipe(vinylPaths(del))
    .pipe(gulp.dest(config.critical.base));
});

//全局关键CSS
criticalCSS=“”；
//生成并内联关键路径CSS
gulp.task（'optimize:critical'，['styles'，function（））{
临界生成({
base:config.critical.base，
src:'index.html'，
css:config.critical.css
}，函数（错误，输出）{
//现在您有了关键路径CSS
控制台日志（输出）；
criticalCSS=输出；
});
返回gulp.src（config.critical.base+'/*.html'）
.水管工({
errorHandler:onError
}))
.烟斗(
htmlreplace({
“criticalCss”：“+criticalCss+”，
})
)
.管道（乙烯基路径（del））
.pipe（gulp.dest（config.critical.base））；
});

我希望criticalCSS全局包含critical.generate的输出。console.log正确显示输出。但是在

'criticalCss': '<style>' + criticalCSS + '</style>',

“criticalCss”：“+criticalCss+”，

criticalCSS返回一个空字符串

---

我如何解决这个问题

这不过是瞎猜，但它看起来像是异步运行初始critical.generate调用，并且criticalCSS变量不能保证正确初始化

为了确保在执行此任务的gulp stream部分时初始化criticalCSS变量，您可以使用关键插件的promise语法，该语法位于：

但是，您仍然需要让gulp知道任务何时完成。。。您可以将回调方法与中显示的流事件结合使用，以便让gulp知道任务何时完成（以及是否发生任何错误）：

gulp.task（'optimize:critical'，['styles'，]函数（完成）{
临界生成({
base:config.critical.base，
src:'index.html'，
css:config.critical.css}）
//在关键操作完成后运行的承诺语法。
.then（函数（输出）{
//现在您有了关键路径CSS
控制台日志（输出）；
//criticalCSS=输出；
var stream=gulp.src（config.critical.base+'/*.html'）
.水管工({
errorHandler:onError
}))
.烟斗(
htmlreplace({
“criticalCss”：“+output+”，
})
)
.管道（乙烯基路径（del））
.pipe（gulp.dest（config.critical.base））；
stream.on（'end'，function（）{
完成（）；
});
stream.on（'error'，函数（err）{
完成（错误）；
});
//初始关键调用出错
}).error（函数（err）{
完成（错误）；
});
});

---

在这个版本的任务中，您甚至不需要criticalCSS变量。

console.log（err）中发生了什么？不返回任何内容。（无错误）。尝试在

criticalCSS=”“之前添加
var
没有其他结果。在criticalCSS之前添加var使var成为局部的而不是全局的。我认为这个解决方案是有意义的：）谢谢。这解决了我的问题。事实上，不需要额外的var。
gulp.task('optimize:critical', ['styles'], function(done) {
  critical.generate({
    base: config.critical.base,
    src: 'index.html',
    css: config.critical.css})
  // Promise syntax that will run after critical has finished.
  .then(function (output) {
      // You now have critical-path CSS
      console.log(output);
      // criticalCSS = output;
      var stream = gulp.src(config.critical.base + '/*.html')
      .pipe(plumber({
        errorHandler: onError
      }))
      .pipe(
        htmlreplace({
          'criticalCss': '<style>' + output + '</style>',
        })
      )
      .pipe(vinylPaths(del))
      .pipe(gulp.dest(config.critical.base));
      stream.on('end', function() {
        done();
      });
      stream.on('error', function(err) {
        done(err);
      });
  // Error on the initial critical call
  }).error(function(err){
    done(err);
  });
});