gulp4.0.2_如何迁移到Gulp.js 4.0

卞轶

2023-12-01

gulp4.0.2

Despite competition from webpack and Parcel, Gulp.js remains one of the most popular JavaScript task runners. Gulp.js is configured using code which makes it a versatile, general-purpose option. As well as the usual transpiling, bundling and live reloading, Gulp.js could analyze a database, render a static site, push a Git commit, and post a Slack message with a single command. Learn how to migrate to Gulp.js 4.0.

尽管有来自webpack和Parcel的竞争，但是 Gulp.js仍然是最受欢迎JavaScript任务执行者之一。 Gulp.js使用代码进行配置，这使其成为通用的通用选项。 与通常的转堆，捆绑和实时重装一样，Gulp.js可以分析数据库，渲染静态站点，推送Git提交并使用单个命令发布Slack消息。 了解如何迁移到Gulp.js 4.0。

For an introduction to Gulp, take a look at the following:

有关Gulp的介绍，请查看以下内容：

Gulp.js 4.0 (Gulp.js 4.0)

Gulp.js 3.x has been the default for around half a decade. Until recently, npm install gulp would have installed 3.9.1 — the version referenced in the tutorials above.

Gulp.js 3.x已成为默认设置约五年了。直到最近， npm install gulp仍会安装3.9.1 —上面教程中引用的版本。

Gulp.js 4.0 has been available throughout that time, but had to be explicitly installed with npm install gulp@next. This was partly owing to ongoing development and because Gulp.js 4 gulpfile.js configuration files are not compatible with those developed for version 3.

Gulp.js 4.0一直可用，但是必须通过npm install gulp@next进行明确安装。这部分是由于正在进行的开发，以及因为Gulp.js 4 gulpfile.js配置文件与为版本3开发的文件不兼容。

On December 10, 2018, Gulp.js 4.0 was announced as the default and published to npm. Anyone using npm install gulp on a new project will receive version 4.

在2018年12月10日， Gulp.js 4.0被宣布为默认设置并发布到npm 。在新项目上使用npm install gulp任何人都将获得版本4。

是否需要迁移到Gulp.js 4？ (Is it Necessary to Migrate to Gulp.js 4?)

No. Gulp.js 3 has been deprecated and is unlikely to receive further updates, but it can still be used. Existing projects won’t update unless the version is explicitly changed in the dependencies section of package.json. For example:

否。Gulp.js3已被弃用，不太可能收到进一步的更新，但仍可以使用。除非在package.json的dependencies部分中显式更改了版本，否则现有项目将不会更新。例如：

"dependencies": {
  "gulp": "^4.0.0"
}

You an also install Gulp.js 3 in new projects using:

您还可以使用以下命令在新项目中安装Gulp.js 3：

npm install gulp@^3.9.1

It’s possibly best to stick with Gulp.js 3.x if you have a particularly complex, mission-critical build system.

如果您具有特别复杂，关键任务的构建系统，则最好坚持使用Gulp.js3.x。

However, existing Gulp.js plugins should be compatible and most gulpfile.js configurations can be migrated in an hour or two. There are several benefits to upgrading, which will become apparent throughout this tutorial.

但是，现有的Gulp.js插件应该兼容，大多数gulpfile.js配置可以在一两个小时内完成迁移。升级有很多好处，在本教程中将显而易见。

升级到Gulp.js 4.0 (Upgrade to Gulp.js 4.0)

Update your package.json dependencies as shown above, then run npm install to upgrade. You can also update the command-line interface using npm i gulp-cli -g, although this hasn’t changed at the time of writing.

如上所示更新您的package.json依赖项，然后运行npm install进行升级。您也可以使用npm i gulp-cli -g更新命令行界面，尽管在编写本文时此操作没有改变。

To check the installation, enter gulp -v at the command line:

要检查安装，请在命令行中输入gulp -v ：

$ gulp -v
[15:15:04] CLI version 2.0.1
[15:15:04] Local version 4.0.0

迁移gulpfile.js (Migrating gulpfile.js)

Running any task is now likely to raise scary-looking errors. For example:

现在，执行任何任务都可能会引发看上去可怕的错误。例如：

AssertionError [ERR_ASSERTION]: Task function must be specified
  at Gulp.set [as _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
  at Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
  at /gulpfile.js:102:8
  at Object.<anonymous> (/gulpfile.js:146:3)
  at Module._compile (internal/modules/cjs/loader.js:688:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
  at Module.load (internal/modules/cjs/loader.js:598:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
  at Function.Module._load (internal/modules/cjs/loader.js:529:3)
  at Module.require (internal/modules/cjs/loader.js:636:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at execute (/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
  at Liftoff.handleArguments (/gulp-cli/index.js:175:63)
  at Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
  at module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
  at Liftoff.<anonymous> (/gulp-cli/node_modules/liftoff/index.js:195:5)

It’s daunting, but you can ignore everything except the first reference of gulpfile.js, which shows the line where an error was encountered (102 in this example).

这令人生畏，但是您可以忽略除gulpfile.js的第一个参考以外的所有内容，该参考显示了遇到错误的行(此示例中为102)。

Fortunately, most of these errors are caused by the same type of problem. The following sections use the CSS tasks tutorial code as an example. The code is available on GitHub and provides the original Gulp.js 3 gulpfile.js and the migrated Gulp.js 4 equivalent.

幸运的是，大多数这些错误是由相同类型的问题引起的。以下各节以CSS任务教程代码为例。该代码可在GitHub上获得，并提供原始的Gulp.js 3 gulpfile.js和已迁移的Gulp.js 4等价物。

将任务数组转换为series()调用 (Convert Task Arrays to series() Calls)

Gulp.js 3 allowed arrays of synchronous tasks to be specified. This was typically used when a watch event was triggered or a task had dependencies. For example, run the images task before the css task:

Gulp.js 3允许指定同步任务数组。通常在触发watch事件或任务具有依赖项时使用。例如，在css任务之前运行images任务：

gulp.task('css', ['images'], () =>

  gulp.src(cssConfig.src)
    // .other plugins
    .pipe(gulp.dest(cssConfig.build));

);

Gulp.js 4.0 introduces the series() and parallel() methods to combine tasks:

Gulp.js 4.0引入了series()和parallel()方法来组合任务：

series(...) runs tasks one at a time in the order specified, and
series(...)一次以指定的顺序运行任务，并且
parallel(...) runs tasks simultaneously in any order.
parallel(...)以任何顺序同时运行任务。

Complex tasks can be nested to any level — something which would have been difficult to achieve in Gulp.js 3. For example, run tasks a and b in parallel then, once both are complete, run tasks c and d in parallel:

复杂的任务可以嵌套到任何级别，这在Gulp.js 3中是很难实现的。例如，并行运行任务a和b ，然后，一旦完成，就并行运行任务c和d ：

gulp.series( gulp.parallel(a, b), gulp.parallel(c, d) )

The css task above can be migrated to Gulp.js 4 by changing the array to a series() method call:

通过将数组更改为series()方法调用，可以将上述css任务迁移到Gulp.js 4：

gulp.task('css', gulp.series('images', () =>

  gulp.src(cssConfig.src)
    // .other plugins
    .pipe(gulp.dest(cssConfig.build));

)); // remember the extra closing bracket!

异步完成 (Async Completion)

Gulp.js 3 permitted synchronous functions but these could introduce errors which were difficult to debug. Consider tasks which don’t return the gulp streamed value. For example, a clean task to delete the build folder:

Gulp.js 3允许使用同步功能，但这些功能可能会引入难以调试的错误。考虑不返回gulp流式传输值的任务。例如，一个clean任务来删除build文件夹：

const
  gulp = require('gulp'),
  del = require('del'),
  dir = {
    src         : 'src/',
    build       : 'build/'
  };

gulp.task('clean', () => {

  del([ dir.build ]);

});

Gulp.js 4.0 throws a warning because it needs to know when a task has completed in order to manage series() and parallel() sequences:

Gulp.js 4.0会发出警告，因为它需要知道任务何时完成才能管理series()和parallel()序列：

[15:57:27] Using gulpfile gulpfile.js
[15:57:27] Starting 'clean'...
[15:57:27] The following tasks did not complete: clean
[15:57:27] Did you forget to signal async completion?

To solve this, Gulp.js 4 will accept a returned Promise (which is supported by the del package):

为了解决这个问题，Gulp.js 4将接受一个返回的Promise (由del包支持) ：

gulp.task('clean', () => {

  return del([ dir.build ]);

});

// or use the simpler implicit return:
// gulp.task('clean', () => del([ dir.build ]) );

Alternatively, pass a callback function which is executed on completion (del also provides a synchronous sync() method):

或者，传递一个在完成时执行的回调函数( del还提供了一个同步sync()方法) ：

gulp.task('clean', (done) => {

  del.sync([ dir.build ]);
  done();

});

Here’s a more complex Gulp.js 3 example with watch tasks:

这是带有监视任务的更复杂的Gulp.js 3示例：

gulp.task('default', ['css', 'server'], () => {

  // image changes
  gulp.watch(imgConfig.src, ['images']);

  // CSS changes
  gulp.watch(cssConfig.watch, ['css']);

});

These can be migrated to Gulp.js 4 series() methods and a done() callback:

这些可以迁移到Gulp.js 4 series()方法和done()回调中：

gulp.task('default', gulp.series('css', 'server', (done) => {

  // image changes
  gulp.watch(imgConfig.src, gulp.series('images'));

  // CSS changes
  gulp.watch(cssConfig.watch, gulp.series('css'));

  done();

}));

温馨提示：将任务方法转换为ES6模块 (Bonus Tip: Convert Task Methods to ES6 Modules)

Most gulpfile.js configurations will work in Gulp.js 4.0 once task arrays are converted to series() calls and asynchronous functions signal completion.

一旦将任务数组转换为series()调用并且异步函数完成了信号，则大多数gulpfile.js配置将在Gulp.js 4.0中运行。

Although the task() definition method is still supported, the newer ES6 module exports pattern offers several benefits:

尽管仍支持task()定义方法，但是较新的ES6模块exports模式具有以下优点：

Private tasks can be defined which can be called within gulpfile.js but not from the gulp command.
私人任务可以定义它可以被称为内gulpfile.js但不能从gulp命令。
Functions can be passed by reference rather than a string name so syntax errors can be highlighted by editors.
可以通过引用而不是字符串名称来传递函数，因此编辑器可以突出显示语法错误。
The same function can be referenced using any number of task names.
可以使用任意多个任务名称来引用同一功能。
It’s easier to define complex dependencies in series() and/or parallel().
在series()和/或parallel()定义复杂的依赖关系会更容易。

Take the following Gulp.js 3 images and css tasks:

进行以下Gulp.js 3 images和css任务：

gulp.task('images', () =>

  gulp.src(imgConfig.src)
    // .other plugins
    .pipe(gulp.dest(imgConfig.build))

);

gulp.task('css', ['images'], () =>

  gulp.src(cssConfig.src)
    // .other plugins
    .pipe(gulp.dest(cssConfig.build))

);

These could be converted to use the Gulp.js 4 module pattern:

这些可以转换为使用Gulp.js 4模块模式：

function images() {

  return gulp.src(imgConfig.src)
    // .other plugins
    .pipe(gulp.dest(imgConfig.build));

}
exports.images = images;
exports.pics = images;


function css() {

  return gulp.src(cssConfig.src)
    // .other plugins
    .pipe(gulp.dest(cssConfig.build));

}
exports.css = gulp.series(images, css);
exports.styles = exports.css;

Note: return statements must be added because the ES6 arrow => functions with an implicit return have been changed to standard function definitions.

注意：必须添加return语句，因为带有隐式return的ES6 arrow =>函数已更改为标准函数定义。

In this Gulp.js 4 example:

在此Gulp.js 4示例中：

either gulp images or gulp pics can be used to run the images() task
gulp images或gulp pics均可用于运行images()任务
either gulp css or gulp styles will run images() followed by css().
gulp css或gulp styles都将运行images()然后再运行css() 。

Set exports.default to define a default task run when gulp is executed from the command line without a specific task.

设置exports.default以定义从命令行执行gulp而没有特定任务时运行的默认任务。

吞咽善良 (Gulp Goodness)

The CSS tasks example, which optimizes images, compiles Sass, minifies CSS, and live-reloads on changes, took less than one hour to convert. Examine the code on GitHub to see:

CSS任务示例，优化图像，编译Sass，最小化CSS并实时重新加载更改，花费了不到一小时的时间进行了转换。检查GitHub上的代码以查看：

the original Gulp.js 3 gulpfile.js, and
原始的Gulp.js 3 gulpfile.js ，以及
the migrated Gulp.js 4 gulpfile.js.
迁移的Gulp.js 4 gulpfile.js 。

It’s taken a while to (properly) arrive, but Gulp.js 4 provides opportunities for defining tasks which would have been impractical in version 3. Updating software can seem like a waste of development effort, but you’ll be rewarded with a faster, more robust set of tasks, which will save time in the long run.

(正确)花费了一段时间，但是Gulp.js 4提供了定义在版本3中不切实际的任务的机会。更新软件似乎是在浪费开发工作，但是您会得到更快的回报，更强大的任务集，从长远来看将节省时间。

翻译自: https://www.sitepoint.com/how-to-migrate-to-gulp-4/