Как организовать подзадачи в глотке 4?

Question

У меня проблема с подзадачами при использовании gulp 4. В gulp 3 я разделил задачи на некоторые файлы и использовал gulp-load-subtasks для их загрузки и выполнения. Когда я использую gulp 4, у меня возникла проблема, когда я пытаюсь загрузить задачи. например: я не могу загрузить задачу a (что зависит от задачи b) перед заданием 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, потому что он загружает скрипты в порядке имени файла (как вы указали).