Gulp：将字符串插入.html页面

Question

1）我正在用Penthouse插件生成关键的css：

var indexCriticalCss = '';

gulp.task('penthouse', function () {
  penthouse({
    url: 'app/index.html',
    css: 'app/assets/css/styles.css',
    width: 1280,
    height: 800
  }, function (err, criticalCss) {
    indexCriticalCss = criticalCss;
    console.log(indexCriticalCss);
  });
});

console.log在终端窗口中输出样式而没有错误。

2）我缩小资产并尝试将样式插入dist/index.html

gulp.task('useref', function() {
  return gulp.src('app/index.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(inject.after('<!-- Critical CSS -->', '<style>' + indexCriticalCss + '</style>'))
    .pipe(gulp.dest('dist'))
});

但是，当我检查dist/index.html文件时，<style></style>内容为空（尽管按预期创建）。有什么想法吗？

PS：构建顺序如下：

gulp.task('build', function(callback) {
  runSequence('clean:dist', 'penthouse',
    ['less', 'useref'], 
    callback);
});