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导入/导出。

一个例子：我的任务是clean，脚本和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上不起作用，因为它按文件名顺序加载脚本（正如你所指出的那样）。

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

1 个答案: