Gulp 4：如何在函数中使用gulp.series()和gulp.parallel()？

Question

我希望定义一个Gulp 4任务，它是由三个函数组成的串行执行。然而，我想将其定义为一个命名函数，而不是使用gulp.task()：

function beforeTest() { ... }
function coreTest() { ... }
function afterTest() { ... }

export function test() {
    // what goes here?
    // this function should be equivalent to:
    // gulp.task('test', gulp.series(beforeTest, coreTest, afterTest));
}

我在 Gulp GitHub 问题跟踪器上找到了一个类似的 问题，其中 OP 尝试了以下等价代码：

export function test() {
    return gulp.series(beforeTest, coreTest, afterTest);
}

这个无法运行的原因在GitHub问题中有解释。 Gulp团队建议的解决方案是不使用命名函数，而是将复合函数分配给一个变量：

export const test = gulp.series(beforeTest, coreTest, afterTest);

然而，这种解决方案在几个方面似乎存在不足。

第一个不足之处是在 GitHub 问题的 评论 中提出的，即此限制对任务排序产生影响（我已经尝试通过使用命名函数而非 gulp.task() 来避免此问题，因为 Gulp 4 要求在引用任务名称前必须先注册它们）。

第二个不足更多是表面性的（因此触发了我的强迫症 :-)）。在运行 gulp test 时，组合的 test 任务会显示在输出中：

[00:00:00] Starting 'test'...
[00:00:00] Starting 'beforeTest'...
[00:00:00] Finished 'beforeTest' after 106 ms
[00:00:00] Starting 'coreTest'...
[00:00:00] Finished 'coreTest' after 214 ms
[00:00:00] Starting 'afterTest'...
[00:00:00] Finished 'afterTest' after 280 μs
[00:00:00] Finished 'test' after 324 ms

然而，如果我有另一个涉及到test的组合任务，比如：

gulp.task('build', gulp.parallel(lint, test));

当我运行 gulp build 命令时，复合任务 test 不会在输出中显示：

[00:00:00] Starting 'build'...
[00:00:00] Starting 'lint'...
[00:00:00] Starting 'beforeTest'...
[00:00:01] Finished 'beforeTest' after 1.08 s
[00:00:01] Starting 'coreTest'...
[00:00:02] Finished 'coreTest' after 977 ms
[00:00:02] Starting 'afterTest'...
[00:00:02] Finished 'afterTest' after 232 μs
[00:00:07] Finished 'lint' after 6.96 s
[00:00:07] Finished 'build' after 6.96 s

我怀疑这可能是因为 Gulp 没有显示任何名为 series 或 parallel 的函数。我尝试设置 test.displayName，如 GitHub 问题所建议的:

export const test = gulp.series(beforeTest, coreTest, afterTest);
test.displayName = 'test';

但这并没有改变 gulp build 的输出结果。我也尝试设置 test.name，但是该属性似乎被冻结了：

TypeError: Cannot assign to read only property 'name' of function 'function series(done) {
    nowAndLater.mapSeries(args, asyncDone, extensions, done);
  }'

看起来，如果我能将复合的test任务定义为一个命名函数，它将解决这两个缺陷。因此，总结一下，我应该如何定义这个问题顶部显示的test函数的主体？

- Rusty Shackleford

Answer 1

export function test(...args) {
    return gulp.series(beforeTest, coreTest, afterTest)(...args);
}

如果任何组件函数需要 Gulp 任务回调参数（即 cb、done 等），则必须通过 gulp.series() 返回的复合函数传递函数参数。

当运行 gulp build 时，该任务定义将生成所需的输出：

[00:00:00] Starting 'build'...
[00:00:00] Starting 'lint'...
[00:00:00] Starting 'test'...
[00:00:00] Starting 'beforeTest'...
[00:00:01] Finished 'beforeTest' after 1.06 s
[00:00:01] Starting 'coreTest'...
[00:00:02] Finished 'coreTest' after 949 ms
[00:00:02] Starting 'afterTest'...
[00:00:02] Finished 'afterTest' after 302 μs
[00:00:02] Finished 'test' after 2.05 s
[00:00:07] Finished 'lint' after 7.12 s
[00:00:07] Finished 'build' after 7.12 s

编辑：这个解决方案的缺陷在于，通过推迟对 gulp.series() 的调用直到实际执行 test 任务时，子任务不会显示在由 gulp --tasks 显示的任务映射中。

例如，使用所提出的解决方案，gulp --tasks 的输出为：

[00:00:00] Tasks for ~/gulpfile.babel.js
[00:00:00] └── test

根据原始的GitHub问题建议，将test定义为变量，输出结果如下：

[00:00:00] Tasks for ~/gulpfile.babel.js
[00:00:00] └─┬ test
[00:00:00]   └─┬ <series>
[00:00:00]     ├── beforeTest
[00:00:00]     ├── coreTest
[00:00:00]     └── afterTest

对于所提出的问题，这并不是一个问题，因为beforeTest、coreTest和afterTest函数不是实际的任务（即它们没有被export），所以我实际上不希望它们出现。但是，因为我很容易遇到与export子任务相同的情况，所以我觉得这个解决方案并不完全令人满意。

- Rusty Shackleford