gulp工具串行series()加载、并行parallel()加载

向右看齐 2023-07-15 02:54 6阅读 0赞

### series()、parallel() 简介 ###

> series()  
> 将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。对于使用 series() 和 parallel() 组合操作的嵌套深度没有强制限制。

> parallel()  
> 将任务功能和/或组合操作组合成同时执行的较大操作。对于使用 series() 和 parallel() 进行嵌套组合的深度没有强制限制。

> 当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

[参考文档：gulp中文API文档][gulp_API]

### 问题提出 ###

当你的项目越来越大的时候，像gulpfile.js（运行 gulp 命令时会被自动加载）里的串行加载如`exports.default = series(copyHtml, copyLibs,copyImgs, compilejs, compileCSS, startServer, watchFile);`可能会影响性能，这时候最好改成并行，那么并行如何做呢？

比如说，copyHtml,copyLibs,copyImgs 这仨之间没有依赖关系，既然没有依赖关系，我们就把他们搞成并行，这样能做到拷贝时速度快些，这在项目非常大时，是非常有必要的。

### parallel() 来配置并行 ###

先解构出来：  
`const { src, series, dest, watch,parallel } = require('gulp') //series串行 parallel并行`

series() 和 parallel() 可以嵌套组合且深度没有强制限制，所以可以写成这种形式：  
`exports.default = series(parallel(copyHtml, copyLibs,copyImgs), compilejs, compileCSS, startServer, watchFile);`

其实js和css也可以并行，那么又可以写成下面这个样子：  
`exports.default = series(parallel(copyHtml, copyLibs,copyImgs), parallel(compilejs, compileCSS), startServer, watchFile);`

[gulp_API]: https://www.gulpjs.com.cn/docs/api/parallel/