2

我在使用 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 中组织子任务？

4

1 回答 1

3

我已经像你一样将我的任务组织在文件中，但是使用 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 上不起作用，因为它按文件名顺序加载脚本（正如你所指出的）。

于 2016-09-07T16:51:05.847 回答