gulp入坑系列——创建多个gulp.task

Posted 2020-08-23

 继续gulp的爬坑路，在准备get更多gulp的具体操作之前，先来明确一下在gulp中创建和使用多个task任务的情况。

    gulp所要做的操作都写在gulp.task()中，系统有一个默认的default任务，如下：

 

1. var gulp = require(‘gulp‘);//gulp自身  
2. gulp.task(‘default‘,[‘task1‘,‘task2‘], function() {  
3.     // 将你的默认的任务代码放在这  
4.     console.log("default");  
5. });  

 

在命令行中的项目根目录里执行gulp指令，便会看到default任务被执行，控制台中输出了"default"。

那么如果我们创建多个gulp.task，像下边这样：

 

1. var gulp = require(‘gulp‘);//gulp自身  
2.   
3. gulp.task(‘task1‘,function () {  
4.     console.log("task1");  
5. });  
6. gulp.task(‘task2‘,function () {  
7.     console.log("task2");  
8. })  
9. gulp.task(‘default‘, function() {  
10. // 将你的默认的任务代码放在这  
11.     console.log("default");  
12. });  

然后再继续执行gulp指令，会发现结果如下:

 

很明显，之后加的task1和task2并没有执行，所以说难道gulpfile.js中只支持一个task咩？

嘛，其实这是一个多余的担心，我们的代码只是少了一个步骤

因为其实在gulpfile.js中，所有操作的入口都是这个叫‘default‘的task，所以只要将我们自己定义的其他task加入到default中就可以了，修改后代码如下：

 

 

1. var gulp = require(‘gulp‘);//gulp自身  
2. gulp.task(‘task1‘,function () {  
3.     console.log("task1");  
4. });  
5. gulp.task(‘task2‘,function () {  
6.     console.log("task2");  
7. })  
8. gulp.task(‘default‘,[‘task1‘,‘task2‘], function() {  
9.     console.log("default");  
10. });  

那么我们再来运行一次gulp指令：

 

看来是成功了，这里也可以看到这些task的执行顺序，首先依次执行了default中引入的task，最后再执行default自身方法体内的操作。