gulp中异步构建任务的问题

Question

编辑 ：看起来Jade的pretty:true是问题所在。 知道为什么吗？

我这里有点麻烦。 让我解释一下我要做什么：

这是应该发生的事情：

file.jade > intermediate.html > index.html

玉文件输出一个html，然后html输出一个缩小的html。 当然，所有功能都在手表中。

为了达到这个目的，我写了些什么：

/* ===== TEMPLATES ===== */
gulp.task('templates', function() {

  gulp.src(src + '/*.jade')
    .pipe(jade({ locals: {data: data}, pretty:true}))
    .pipe(rename('intermediate.html'))
    .pipe(gulp.dest(src));
})
/* ===== HTML ===== */
gulp.task('html', function() {
  // Get file
    return gulp.src('./src/intermediate.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(inject(gulp.src([src + '/responsive.css']), {
        starttag: '<!-- inject:head:{{ext}} -->',
        transform: function (filePath, file) {
          // return file contents as string
          return file.contents.toString('utf8')
        }
      }))
        .pipe(rename('index.html'))
        .pipe(minifyHTML(options))
        // Output file
        .pipe(gulp.dest(archive))
        .pipe(gulp.dest(dest));
});
/* ===== WATCH ===== */
gulp.task('watch', function() {
    // Folders to watch and tasks to execute
    gulp.watch([src + '/template.jade'], ['default']);

});

/* ===== DEFAULT ===== */
// Default gulp task ($ gulp)
gulp.task('default', function(callback) {
  runSequence('clean',
              'templates',
              'html',
              'notify',
              callback);
});

现在，当构建发生时会发生什么？ file.jade输出middle.html，但是index.html是使用OLD middle.html版本生成的，而jade模板之前是使用它生成的。 解释起来有点棘手。

我的意思是，我每次必须连续做两次以获取最新的index.html！ 因为index.html采用的是存在于jade之前的模板之前存在的Middle.html版本。 我希望我足够清楚

我认为运行顺序可以，但是似乎不行！

Answer 1

我不是专业人士，但这些return似乎有问题。 如果您正在做异步工作，则需要使用回调。 可能会完全跳过return语句，或者在其他所有命令之后运行它们。

 gulp.task('html', function() { // Get file gulp.src('./src/intermediate.html') .pipe(inlineCss({ applyStyleTags: true, applyLinkTags: true, removeStyleTags: true, removeLinkTags: true })) .pipe(inject(gulp.src([src + '/responsive.css']), { starttag: '<!-- inject:head:{{ext}} -->', transform: function (filePath, file) { // return file contents as string file.contents.toString('utf8') } })) .pipe(rename('index.html')) .pipe(minifyHTML(options)) // Output file .pipe(gulp.dest(archive)) .pipe(gulp.dest(dest)); }); 

免责声明：我从没用过大口吃。

另外，您的控制台是否打印任何错误或警告？

Answer 2

这几乎是一个Grunt结构，您可以将其输出到磁盘并在另一个任务中将其拾取。 您希望将这些内容保存在一个流中，而无需将中间内容写入Gulp中的磁盘。

既然它们都是顺序的，为什么不通过一个管道运行它呢？ 模板和html应该合并为一个gulp任务imo。 Gulp的作者在这里也证实了这一点： 如何在任务＃69之间传输流

如果您确实希望分离逻辑，则可以使用lazypipe预先构造两个管道（甚至从实用程序返回它们）。

选项2

如果您坚持要将这些任务作为两个部分或文件来保存，则可以将它们编写为两个gulp插件，并从一个管道到另一个管道。 尽管这对我来说似乎工程过度，但这是有可能的。 如何编写一个gulp插件 。