我應該如何在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上不起作用，因爲它按文件名順序（正如您指出的那樣）加載腳本。