一、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 任务名）

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

（29）Gulp组合任务相关推荐

python 组合优化回撤最小_【策略回测】多因子搭配组合优化（内附bonus）
是的,你们要的策略.虽然没有研报来的精致,也没有高深的机器学习,SVM啥的,但是绝对符合正常人的理解.大家又要觉得,IS好啥都说明不了,关键还得看OS,大家反应好的话,一个月后我会记得来放OS结果的. ...
嘴对嘴教你使用Gulp
什么是Gulp? Gulp 是一个前端自动化工具,开发者可以使用它来处理常见任务: 搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaSc ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
iOS 动画基础总结篇
iOS 动画基础总结篇动画的大体分类(个人总结可能有误) 分类.png UIView 动画属性动画 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
数据挖掘 numpy进阶之技巧和提示
为什么80%的码农都做不了架构师?>>> "自动"改变形状更改数组的维度,你可以省略一个尺寸,它将被自动推导出来. >>> a = ar ...
python数据分析系列教程——NumPy全解
速查: 矩阵对象的属性: matrix.T transpose:返回矩阵的转置矩阵 matrix.H hermitian (conjugate) transpose:返回复数矩阵的共轭元素矩阵 mat ...
[转载] python numpy 总结
参考链接: Python中的numpy.compress 先决条件在阅读这个教程之前,你多少需要知道点python.如果你想重新回忆下,请看看Python Tutorial. 如果你想要运行教程中的 ...
大数据分析的好帮手 Excel函数应用的顶级实战 Excel数据分析应用+VBA实战 24G课程
===============课程目录=============== ├<第二章函数应用篇 01-30> │ ├2-01 公式求值和F9帮您解析函数的运算逻辑和顺序 │ ├2-02 ...
【量化选基】每年初买入近5年收益率最高的10支基金会暴富吗？
结论:年化收益率8.5%.并不高.年度最大回撤32%,体验非常不好用python写了个筛选基金的策略 ,每年1月1日选择最差的几支基金买入,年底12月31日卖出条件:近5年收益率最高的10支基金: ...

（29）Gulp组合任务

一、Gulp组合任务介绍

二、npm scripts命令的执行方式

三、Gulp任务的执行方式

四、Gulp组合任务

五、Gulp构建组合任务

六、Gulp构建组合任务示例

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

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

3.新建一个gulpfile.js文件

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

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

（29）Gulp组合任务相关推荐

最新文章

热门文章