gulp 中的异步构建任务问题

Question

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

我在这里遇到了一些麻烦。让我解释一下我要做什么：

这是应该发生的事情：

file.jade > intermediate.html > index.html

jade 文件输出一个 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 intermediate.html 版本生成的，在它由玉模板生成之前。解释起来有点棘手。

我的意思是我每次都需要连续执行 2 次才能获得最新的 index.html ！因为 index.html 采用了从jade 编译模板之前存在的intermediate.html 版本。我希望我说的足够清楚

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

Answer 1

我不是专业人士，但那些 returns 看起来有问题。如果您正在执行异步操作，则需要使用回调。它可能会完全跳过 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));
});

免责声明：我从未使用过 gulp。

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

Answer 2

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

既然它都是连续的，为什么不通过一个管道运行它呢？模板和 html 应该合并为一个 gulp 任务 imo。 Gulp 的作者在这里也证实了这一点：How can I pipe stream between tasks #69

如果你真的想分离逻辑，你可以使用lazypipe预先构造两个管道（甚至从实用程序中返回它们）。

选项 2

如果您坚持将这些任务保留为两个部分或文件，则可以将它们编写为两个 gulp 插件并从一个到另一个管道。虽然这对我来说似乎过度设计，但这是一种可能性。 How to write a gulp plugin.