博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
gulp中如何保证任务执行顺序。
阅读量:5870 次
发布时间:2019-06-19

本文共 2336 字,大约阅读时间需要 7 分钟。

hot3.png

举一个简单了例子:

gulp.task('task2',function(){	setTimeout(function(){		console.log("task2 has been completed")	},3000)})gulp.task('task1',['task2'],function(){	console.log("task1 has been completed")})

在命令行中执行gulp task1

145018_1HmN_2813297.png

通过命令行的任务流程,我们可以看出,任务并没有像我们想象的那样运行。这是因为在gulp中,所有task都是异步执行的,那么此时我们需要引入q模块来帮助我们解决这个问题。

通过命令行输入gulp install q --save-dev来安装q模块

var Q = require('q');

var Q = require('q');gulp.task('task2',function(){    var deferred = Q.defer();	setTimeout(function(){		console.log("task2 has been completed")        deferred.resolve();	},3000)    return deferred.promise;})gulp.task('task1',['task2'],function(){	console.log("task1 has been completed")})

010917_AMwM_2813297.png

这是我们就可以看出不同了,当打印"task2 has been completed"之后,task2任务才结束,并开始task1任务。

那么,当我们使用stream流的时候,该如何确保同步执行的顺序呢。

011527_JUk4_2813297.png

var uglify = require('gulp-uglify')var checkFilesize = require("gulp-check-filesize");gulp.task('task2',function(){	    gulp.src('lib/react-dom.js')	 	.pipe(uglify())	 	.pipe(gulp.dest('compress'))	 	})gulp.task('task1',['task2'],function(){	gulp.src('compress/react-dom.js')	.pipe(checkFilesize())})

 我们通过命令行npm install gulp-uglify gulp-check-fileseize安装两个模块,前者用于压缩丑化代码,后者用于检测文件大小。

接下来执行gulp task1

013324_jQEH_2813297.png

我们可以看到并没有打印出任何有关文件大小的信息,说明执行task1的时候task2还没有执行完,也就是说comress/react-dom.js还未存在。

下面我们使用回掉函数来确保task2执行完毕之后再执行task1。使用on来监听end事件,当监听到stream已经执行完毕后,打印"uglify has been comleted"然后执行回掉函数,结束task2事件(为什么使用callback()可以用于结束,这个我还不知道。)

gulp.task('task2',function(callback){	    gulp.src('lib/react-dom.js')	 	.pipe(uglify())	 	.pipe(gulp.dest('compress'))	 	.on('end',function(){	 		console.log('uglify has benn comleted')	 		callback()	 	})	 	})gulp.task('task1',['task2'],function(){	gulp.src('compress/react-dom.js')	.pipe(checkFilesize())})

013828_jZz2_2813297.png

我们可以看出已经打印出react-dom.js的文件大小了。

还有一种写法,不过这种写法,就不能打印成功信息了。

gulp.task('task2',function(callback){	    gulp.src('lib/react-dom.js')	 	.pipe(uglify())	 	.pipe(gulp.dest('compress'))	 	.on('end',callback)	 	})gulp.task('task1',['task2'],function(){	gulp.src('compress/react-dom.js')	.pipe(checkFilesize())})

最后一种写法是直接return一个stream流,

gulp.task('task2',function(callback){	    return gulp.src('lib/react-dom.js')	 	.pipe(uglify())	 	.pipe(gulp.dest('compress'))	 	})gulp.task('task1',['task2'],function(){	gulp.src('compress/react-dom.js')	.pipe(checkFilesize())})

这也是可以做到的。

以上的方法都是针对于各种情况,使gulp任务安装指定顺序执行。希望可以帮到大家。

 

转载于:https://my.oschina.net/sunzitong/blog/791783

你可能感兴趣的文章
[老老实实学WCF] 第八篇 实例化
查看>>
前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js
查看>>
js数据类型转换大全
查看>>
java面向对象高级分层实例_实体类
查看>>
python ide
查看>>
Servlet--传参和接参
查看>>
UI之UIAlertView--提示框
查看>>
Guice 练习 constructorbindings demo
查看>>
model 弹出框放到一个html中
查看>>
jQuery easyui中获取datagrid某一列的值之和
查看>>
20190104 你懂得
查看>>
dedecms调用子栏目及文章列表
查看>>
jsoup抓取网页+具体解说
查看>>
关于ping以及TTL的分析
查看>>
uboot下netconsole的原理及用法
查看>>
有用PHP依赖管理工具Composer新手教程
查看>>
Hibernate与 MyBatis的比较
查看>>
网页选项卡的应用
查看>>
PLSQL Developer安装(Oracle11g+win7_64bit)
查看>>
创建和使用虚拟专用目录
查看>>