我应该如何在 gulp 4 中组织子任务？

Question

我在使用 gulp 4 时遇到子任务问题。 在 gulp 3 中，我将任务拆分为一些文件并使用gulp-load-subtasks 来加载和执行它们。当我使用 gulp 4 时，我在尝试加载任务时遇到了问题。例如：我无法在任务 b 加载之前加载任务 a（这取决于任务 b）。当我尝试这样做时，我收到了错误AssertionError: Task never defined: b。

这是我的文件夹：

gulpflie.babel.js workflow/ common.js task/ a.js b.js

在 gulp 4 中我应该如何组织子任务？

Answer 1

我已经像你一样在文件中组织了我的任务，但是使用 ES6 导入/导出。

一个例子： 我已经清理了任务、脚本和 gulpfile.babel.js，内容如下： tasks/clean.js:

import promisedDel from 'promised-del';

let cleanTaskCreator = (config) => {
  let task = (done) => {
    return promisedDel((typeof config.path === 'string' ? [config.dest] : config.dest));
  };
  task.displayName = 'clean:' + config.name;
  task.description = 'clean task for ' + config.name;
  return task;
};

export default cleanTaskCreator;

tasks/scripts.js:

import gulp from 'gulp';
import named from 'vinyl-named';
import webpack from 'webpack-stream';

import {scripts as config} from '../config.js';
import clean from "./clean";

let scripts = () => {
  return gulp.src(config.entries)
    .pipe(named())
    .pipe(webpack(config.webpackConfig))
    .pipe(gulp.dest(config.dest));
};

scripts.displayName = 'scripts';
scripts.description = 'generation of scripts assets';

if(process.env.NODE_ENV !== 'production') {
  let realScripts = scripts;
  scripts = gulp.series(clean(config), realScripts);
  scripts.displayName = 'clean&scripts';
  scripts.description = 'clean scripts and ' + scripts.description;
}

export default scripts;

最后是gulpfile.babel.js：

import * as gulp from "gulp"
import scripts from "./gulp/tasks/scripts";

gulp.task(scripts);

let defaultTask = gulp.series(scripts);
defaultTask.displayName = 'default';
defaultTask.description = 'default';
gulp.task(defaultTask);

每个任务都会公开一个要执行的函数，并在内部定义其所有依赖项（正如您在任务脚本中看到的那样，如果我们在生产环境中，我们会在生成之前清理资产）。 然后，主文件，只导入这些函数并定义主任务（经典默认）和其他可从命令行访问的任务。

我不确定这是否是使用 gulp4 组织项目（大或小）的最佳模式（或正确模式），但对我来说这种布局很好。

最后，像 gulp-load-subtasks 这样的模块在 gulp4 上不起作用，因为它按文件名顺序加载脚本（正如您所指出的那样）。