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')));
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...
    Sakura_P阅读 1,702评论 0 2
  • 说一下前端的自动化构建工具gulp吧,其实国内的前端自动化工具比较流行的还有就是fis和grunt了,但是我觉得目...
    看物看雾阅读 326评论 0 4
  • @文章来源:拉钩大前端就业训练营-念念 Gulp 简介 自动化构建工具 自动化构建工具,可以帮我们又快又好的完成自...
    你好好想想_be60阅读 996评论 0 0
  • 以下皆为拉勾教育课件内笔记 简介 自动化构建工具 自动化构建工具,可以帮我们又快又好的完成自动化构建任务。相比有 ...
    白棠阅读 199评论 0 0
  • Gulp是基于流的自动化构建工具,它不仅能对网站资源进行优化,而且在开发过程中能避免很多重复的工作,比如对相关文件...
    小强8088阅读 333评论 0 0