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')));