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

继续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. gulp.task(‘task1‘,function () {
  3. console.log("task1");
  4. });
  5. gulp.task(‘task2‘,function () {
  6. console.log("task2");
  7. })
  8. gulp.task(‘default‘, function() {
  9. // 将你的默认的任务代码放在这
  10. console.log("default");
  11. });

然后再继续执行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自身方法体内的操作。

时间: 2024-10-13 21:22:13

gulp入坑系列(3)——创建多个gulp.task的相关文章

gulp入坑系列(2)——初试JS代码合并与压缩

在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下: index.js: var index={}; index={ test:function(argument){ console.log('test'); } } index.test()

Swift入坑系列—集合类型

数组(Arrays) 字典(Dictionaries) 数组(Arrays) 在OC里面,NSArray和NSMutableArray这两个类可以存储任意类型的对象,并且不提供所返回对象的任何特别信息.在Swift中,数据值被存入某个数组之前类型必须明确.方法是通过显式的类型标注或者类型推断,而且不是必须是class类型. //定义了一个存储 字符串类型 的可变数组('var'字段修饰) var shoppingList: [String] = ["Eggs", "Milk&

1-STM32带你入坑系列(STM32介绍)

由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车,要用摄像头,所以学习了STM32. 大家可以看我的这一系列的文章  https://www.cnblogs.com/yangfengwu/category/802676.html 说一下哈,如果学单片机的,最好要学习一下STM32,因为现在大部分公司都在用,或者这个系列的,或者都是Cortex-M

VUE 入坑系列 一 事件

html代码 <div id="app"> <button v-on:click="counter += 1">加1</button> <button @click="counter += 1">加2</button> <button v-on:click="minusOne">减1</button> <button @click=&qu

VUE 入坑系列 一 双向绑定

html代码 <div id="app"> <p>{{message}}</p> <span>message1</span> <input v-model="message"> <span>message2</span> <input v-model="message"> </div> javascript代码 var vm =

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,

web前端入坑第四篇:你还在用 jQuery?

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐[web前端入坑系列]前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!第三篇:web前端入坑第三篇 | 一条"不归路" - 学习路线! 再说这个话题之前,我们先来扫盲普及一下 [jquery] 到底是什么以及它火爆将近十年的重要原因. [ 重新认识 - Jquery

webpack入坑之旅(一)不是开始的开始

最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过任何的构建工具与模块化工具,所以本系列会十分的基础.并且可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进.谢谢! 这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webp

webpack入坑之旅(六)配合vue-router实现SPA

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 在上面的练习当中我们已经成