Question

我有以下gulp任务

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

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

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

criticalCSS返回一个空字符串。

我该如何解决这个问题？

Answer 1

只是在黑暗中拍摄，但看起来初始的critical.generate调用是异步运行的，并且不能保证criticalCSS变量能够正确初始化。

要确保在继续执行此任务的gulp stream部分时初始化criticalCSS变量，您可以使用在https://www.npmjs.com/package/critical

找到的关键插件的promise语法。

但是，您仍然需要知道任务完成后知道...您可以将回调方法与显示在Run code after gulp task done with all files的流事件结合使用，让gulp知道任务何时完成（如果发生任何错误）：

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

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

Gulp任务 - 将var传递给下一个管道

1 个答案: