百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

Gulp 第一个Gulp任务 光遇姆明季第一个任务怎么做

yuyutoo 2024-10-22 18:46 11 浏览 0 评论

本节我们开始学习如何创建 Gulp 任务。每一个 Gulp 任务都是一个异步的 JavaScript 函数,这个函数是一个可以接收回调函数 callback 作为参数的函数,或者是一个返回 streampromiseevent emitterchild processobservable 类型值的函数。

gulp.task()方法

gulp.task() 用于创建一个 gulp 任务,语法如下所示:

gulp.task(name[, deps], fn)
  • name: 表示任务的名称。
  • deps :当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则省略这个参数。
  • fn:为任务函数,我们把任务要执行的代码都写在里面。是一个可选参数。

给任务起一个唯一的名称后,我们可以通过这个名称来执行任务,例如:

> gulp 任务名

在执行任务时,如果我们不加任务名进行执行,也就是只输入 gulp 命令时 ,会执行名为 default 的默认任务,如果没有定义这个任务,将什么也不做。

创建gulpfile文件

首先我们需要在项目根目录下创建一个 gulpfile.js 文件。并在文件中引入 gulp

var gulp = require('gulp');

用于告诉 Node 去 node_modules 中查找 gulp 包,先在局部进行查找,找不到则去全局环境中查找。找到之后就会赋值给 gulp 变量,然后我们就可以使用它了。

示例:

例如创建一个名为 xkd 的任务:

let gulp = require('gulp');

gulp.task('xkd',  done => {
    console.log("你好,侠课岛!")
    done()
});

执行 gulp xkd 命令,下图为运行结果:

  • 运行结果第一行表示找到本地的 gulpfile.js 文件。
  • 运行结果第二行表示开始运行任务 xkd,这个 xkd 是我们给任务定义的名称。
  • 运行结果第三行表示运行代码内的逻辑。
  • 运行结果第四行表示任务'xkd'运行结束,一共耗时5.27 ms

执行多个任务

gulp.task() 方法中的第二个参数为一个数组,数组中的值是任务名的集合,当执行此任务时,会先执行数组中的任务。我们来看一下例子。

示例:

下面我们定义三个任务:

const gulp = require('gulp');

gulp.task('one', done1 => {
  console.log("第一个任务");
  done1();
})

gulp.task('two', done2 => {
  console.log("第二个任务");
  done2();
})

gulp.task('test', gulp.series('one', 'two', done3 =>{
    console.log("测试任务")
    done3()
}))

然后将任务 onetwo 添加到任务 test 中,此时如果我们输入 gulp test 命令,会先执行数组中的任务,我们来看一下任务的执行顺序:

链接:https://www.9xkd.com/

相关推荐

电脑 CMD 命令大全:简单粗暴收藏版

电脑CMD命令大全包括了许多常用的命令,这些命令可以帮助用户进行各种系统管理和操作任务。以下是一些常用的CMD命令及其功能:1、系统信息和管理...

电脑维修高手必备!8个神奇DOS命令,自己动手不求人

我相信搞电脑维修或者维护的基本都会些DOS的命令。就算Windows操作系统是可视化的界面,但很多维护检查是离不开DOS命令的。掌握好这些命令,你不仅能快速诊断问题,还能解决90%的常见电脑故障。下...

一个互联网产品总监的设计技巧总结 - 技术篇

古语:工欲善其事必先利其器。往往在利其器后我们才能事半功倍。从这个角度出发成为一个合格的产品经理你需要的是“利其器”,这样你才能产品的设计过程中如鱼得水,得心应手。有些产品经理刚入职,什么都感觉自己欠...

超详解析Flutter渲染引擎|业务想创新,不了解底层原理怎么行?

作者|万红波(远湖)出品|阿里巴巴新零售淘系技术部前言Flutter作为一个跨平台的应用框架,诞生之后,就被高度关注。它通过自绘UI,解决了之前RN和weex方案难以解决的多端一致性...

瑞芯微RK3568|SDK开发之环境安装及编译操作

1.SDK简介一个通用LinuxSDK工程目录包含有buildroot、app、kernel、device、docs、external等目录。其中一些特性芯片如RK3308/RV1108/R...

且看L-MEM ECC如何守护i.MXRT1170从核CM4

大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家分享的是恩智浦i.MXRT1170上Cortex-M4内核的L-MEMECC功能。本篇是《简析i.MXRT1170Cortex-M7F...

ECC给i.MXRT1170 FlexRAM带来了哪些变化?

大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家分享的是恩智浦i.MXRT1170上Cortex-M7内核的FlexRAMECC功能。ECC是“ErrorCorrectingCode”...

PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全

PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全资源宝整理分享:https://www.htple.net...

从零开始移植最新版本(2023.10)主线Uboot到Orange Pi 3(全志H6)

本文将从零开始通过一步一步操作来实现将主线U-Boot最新代码移植到OrangePi3(全志H6)开发板上并正常运行起来。本文从通用移植思路的角度,展现是思考的过程,通过这种方式希望能让读者一通百...

可视化编程工具Blockly——定制工具箱

1概述本文重点讲解如何定制Blocklytoolbox上,主要包含如下几点目标:如何为toolbox不同类别添加背景色如何改变选中的类别的外观如何为toolbox类别添加定制化的css如何改变类别...

用户界面干货盘点(用户界面的基本操作方法)

DevExpressDevExpressWPF的DXSplashScreen控件在应用加载的时候显示一个启动界面。添加DXSplashScreen后,会默认生成一个XAML文件,当然,你也可...

Vue3+Bootstrap5整合:企业级后台管理系统实战

简洁而不简单,优雅而不失强大在当今快速发展的企业数字化进程中,高效、美观的后台管理系统已成为企业运营的核心支撑。作为前端开发者,我们如何选择技术栈,才能既保证开发效率,又能打造出专业级的用户体验?答案...

什么?这三款i.MXRT型号也开放了IAP API?

大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家介绍的是i.MXRT1050/1020/1015系列ROM中的FlexSPI驱动API使用。今天痞子衡去4S店给爱车做保养了,...

OneCode基础组件介绍——表格组件(Grid)

在企业级应用开发中,表格组件是数据展示与交互的核心载体。OneCode平台自研的Grid表格组件,以模型驱动设计...

开源无线LoRa传感器(光照温湿度甲醛Tvoc)

本开源项目基于ShineBlinkC2M低代码单片机实现,无需复杂单片机C语言开发。即使新手也可很容易用FlexLua零门槛开发各种功能丰富稳定可靠的IoT硬件,更多学习教程可参考Flex...

取消回复欢迎 发表评论: