我应该如何在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

我应该如何安排子任务一饮而尽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上不起作用，因为它按文件名顺序（正如您指出的那样）加载脚本。