（29）Gulp组合任务

一、Gulp组合任务介绍

Gulp组合任务就是通过一条命令执行多个任务，执行方式分为并行执行和串行执行。

二、npm scripts命令的执行方式

并行执行：多个任务一起执行，比如我们日常生活中的百米赛跑，多个人听到枪声后一起开跑！

串行执行：多个任务排列执行，就是当一个任务执行完成以后，才能执行下一个任务，依次执行

三、Gulp任务的执行方式

并行执行：多个任务一起执行，比如我们日常生活中的百米赛跑，多个人听到枪声后一起开跑！

串行执行：多个任务排列执行，就是当一个任务执行完成以后，才能执行下一个任务，依次执行

四、Gulp组合任务

Gulp的并行执行：通过gulp.parallel(任务1，任务2，任务3)

Gulp的串行执行：通过gulp.series(任务1，任务2，任务3)

五、Gulp构建组合任务

写法：gulp.series( 任务1, gulp.parallel( 任务2, 任务3 ), 任务4 )

说明：Gulp构建组合任务就是先使用串行方法依次执行，再串行方法当中写并行执行的方法将多个任务放在一起进行并行执行。

应用场景：

Gulp构建并行执行：常用来将CSS和JS文件一起执行，因为这两个文件没有执行的先后顺序，也就是说这两个文件先执行哪个文件都可以。

Gulp构建串行执行：常用来将less/sass预处理器书写的css代码，先编译完成css文件，再执行第二步把css文件进行压缩，然后再上线。

六、Gulp构建组合任务示例

1.初始化项目（npm init --yes）

2.按照gulp包（npm i gulp -D）

 3.新建一个gulpfile.js文件

4.在gulpfile.js文件中创建任务

//导入gulp模块
const { task } = require('gulp');
const gulp = require('gulp')
//任务1
const task1 = (callback) => {
  setTimeout(() => {
    console.log('task1 is running');
    callback()
  }, 1000);
}
//任务2
const task2 = (callback) => {
  setTimeout(() => {
    console.log('task2 is running');
    callback()
  }, 1000);
}
//任务3
const task3 = (callback) => {
  setTimeout(() => {
    console.log('task3 is running');
    callback()
  }, 1000);
  
}
//通过并行执行任务
//导出
exports.p = gulp.parallel(task1,task2,task3)
//通过串行执行任务
//导出
exports.s = gulp.series(task1,task2,task3)

//Gulp构建组合任务示例
exports.merge = gulp.series(task1,gulp.parallel(task2,task3))

 5.执行命令（gulp 任务名）

通过执行任务后我们发现，并行执行的是一起进行打印输出的。串行是一个接一个的，每一秒输出一个的形式输出的，组合执行是第一个任务输出后等待一秒钟后将第二个任务和第三个任务一起输出的。