Gulp 3 迁移至 Gulp 4 攻略

Gulp 3 升级到Gulp 4（安装）
使用最新版Gulp之前，检查一下Gulp的版本。我们通常只需更新package.json中的版本号，但可能会有遇到问题。原因多半是因为分别在项目文件夹下和全局环境中都安装了Gulp。

全局安装：使用 -g 替换 -save-dev 来进行

删除 项目文件夹和全局环境中的Gulp

npm uninstall gulp --save-dev
npm uninstall gulp -g

安装 Gulp 4

npm install gulp@4 --save-dev 

安装 命令行工具

Gulp 4 把命令行工具从Gulp的核心代码中剥离了。Gulp 3 和Gulp 4 都能使用独立出来的命令行工具

npm install gulp-cli --save-dev

安装完成

---

重构任务（Tasks）

Gulp 现在只支持 2 个参数的 gulp.task。当使用两个参数时，它接受字符串形式的任务名，以及该任务对应的函数。例如，在版本 3.x 与版本 4 中，下面的任务代码保持不变：

gulp.task('clean', function() {...})

但 3 个参数的形式该怎么办呢？我们如何指定一个具依赖的任务？你可以使用新的 gulp.series 和 gulp.parallel 来解决这个问题。这两个函数都接受一个函数或者任务名列表，然后返回新的函数。gulp.series 返回一个按给定的任务 / 函数的顺序执行的函数，而 gulp.parallel 则返回一个能并行执行给定的任务/函数的函数。终于，Gulp 提供了选择顺序或并行执行任务的能力，而不用添加别的依赖（传统上是使用 run-sequence）或者丧心病狂地人工分配任务的依赖。

所以，如果之前有这样一个任务：

gulp.task('styles', ['clean'], function() {
    ...
});

变为：

gulp.task('styles', gulp.series('clean', function() {
   ...
}));

当任务有多个依赖时，gulp.sereis 与 gulp.parallel 可能被嵌套
例如，这个常见的模式：

gulp.task('default', ['scripts', 'styles'], function() {
    ...
});

变为：

gulp.task('default', gulp.series(gulp.parallel('scripts', 'styles'), function() {
    ...
}));

多个任务相互之间依赖时，需要把依赖从任务中抽离出来，并在一个更大的“父级”任务中把依赖指明成一个 series，防止被调用多次；
例如：

gulp.task('clean', function() {...});
gulp.task('styles', gulp.series('clean', function() {...}));
gulp.task('scripts', gulp.series('clean', function() {...}));

gulp.task('default', gulp.parallel('scripts', 'styles'));

这是因为 parallel 与 series 并不指定依赖；它们只是简单地把多个函数组合成一个函数。所以我们需要把依赖从任务中抽离出来，并在一个更大的“父级”任务中把依赖指明成一个 series。

重要提示：你不能在定义其他更小的任务的复合任务之前定义 default 任务。当你调用 gulp.series(“taskName”) 时，名为 “taskName” 需已被定义。这就是为什么在 Gulp 3 中我们可以把 default 放在任意位置，而在 Gulp 4 中却得把 default 移至最底端的原因。

// 这些任务不再有任何依赖
gulp.task('styles', function() {...});
gulp.task('scripts', function() {...});
gulp.task('clean', function() {...});

// default 依赖于 scripts 与 styles
gulp.task('default', gulp.series('clean', gulp.parallel('scripts', 'styles')));