gulp入门6:watch

news/2024/7/14 18:00:59/文章来源:https://blog.csdn.net/gusushantang/article/details/139293681

当使用Gulp进行前端开发自动化时,gulp.watch 是一个非常有用的功能,用于监视文件或文件夹的变化,并在这些文件或文件夹发生变化时执行特定的任务。以下是关于 gulp.watch 的深入讲解:

1. gulp.watch 的基本用法

gulp.watch 的基本语法如下:

gulp.watch(glob[, opts], tasksFunction|tasksArray[, done]);
  • glob: 要监视的文件匹配模式,与 gulp.src() 中的 glob 规则相同。
  • opts: 可选的配置对象,通常不需要用到。
  • tasksFunction|tasksArray: 文件变化后要执行的任务,可以是一个函数或一个任务数组。
  • done: 可选的回调函数,当所有任务执行完成后调用。

例如:

gulp.watch('*.scss', gulp.series('sass', 'minify-css', 'reload'));

2. 监听文件变化并执行回调函数

除了执行任务外,你还可以为 gulp.watch 提供一个回调函数,该回调函数会在文件变化时被调用,并传入一个事件对象。这个事件对象包含了文件变化的相关信息,如变化类型(added, changed, deleted)和触发事件的文件路径。

gulp.watch('*.scss', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');// 在这里可以执行额外的逻辑
});

3. gulp.watch 的限制及解决方案

  • 无法监听到新增加的文件:默认情况下,gulp.watch 无法监听到新增加的文件。为了解决这个问题,可以引入 gulp-watch 模块或其他相关插件。
  • 只触发一次的问题:在某些情况下,gulp.watch 可能只会触发一次。这通常是由于Gulp版本或配置问题导致的。可以尝试更新Gulp版本或使用 gulp-watch 插件来解决这个问题。

4. 使用 gulp-watch 插件

gulp-watch 是一个独立的插件,它提供了比 gulp.watch 更强大的功能。使用 gulp-watch 可以解决 gulp.watch 的一些限制,如无法监听到新增加的文件或只触发一次的问题。

const gulp = require('gulp');
const watch = require('gulp-watch');gulp.task('watch', function() {watch('**/*.scss', function(event, cb) {// 在这里执行你的任务// ...cb(); // 调用回调函数以通知gulp-watch任务已完成});
});

5. 总结

gulp.watch 是Gulp中非常实用的功能,用于监视文件或文件夹的变化并执行相应的任务。通过掌握其基本用法和限制,并结合 gulp-watch 插件,你可以更有效地使用Gulp进行前端开发自动化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1054386.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[JAVASE] String类 StringBuffer类 StringBuilder类

目录 一.String类 1.1 String字符串不可变的原因 1.2 字符串中的比较方法 1.2.1 equals 1.2.2 compareTo 与 compareToIgnoreCase 1.3 字符串中的查找方法 1.3.1 charAt 1.3.2 indexOf 与 lastIndexOf 1.4 字符串中的转换方法 1.4.1 valueOf 1.4.2 toUpperCase 与 to…

我和jetson-Nano的故事(12)——安装pytorch 以及 torchvision

在jetson nano中安装Anaconda、pytorch 以及 torchvision 1.Pytorch下载安装2.Torchvision安装 1.Pytorch下载安装 首先登录英伟达官网下载Pytorch安装包,这里以PyTorch v1.10.0为例 安装依赖库 sudo apt-get install libjpeg-dev zlib1g-dev libpython3-dev liba…

做好开源快速开发平台研发创新 助力行业高效发展!

随着信息化时代的到来,科技的力量无处不在。为了提高办公效率,很多大中型企业倾向于使用更为先进的软件平台来助力企业降本增效。在众多助力神器之中,开源快速开发平台低代码技术平台深得广大新老客户朋友的喜爱,它与生俱来的优势…

使用Monkey命令做简单的安卓APP稳定性测试

Monkey是Android SDK提供的一个命令行工具,可以简单方便的发送伪随机的用户事件流,对Android APP做压力(稳定性)测试。主要是为了测试app是否存在无响应和崩溃的情况。 Monkey 是SDK中附带的一个工具,所有的事件都是随…

yolov10 使用自己的数据集训练目标检测模型

1 环境配置(使用anaconda) conda create -n yolov10 python=3.9 //创建虚拟环境 conda activate yolov10 //激活虚拟环境 pip install -r requirements.txt //执行yolov10 路径下requirements.txt 安装依赖 pip install -e .2.数据集制作 使用lableImage制作数据集(win版…

wps表格样式【笔记】

wps表格样式【笔记】 前言版权推荐wps表格样式第一种方法第二种方法 最后 前言 2024-5-15 19:25:47 以下内容源自《【笔记】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://jsss-1.blog.csdn.net …

OpenHarmony有氧拳击之应用端开发

一、简介 继《OpenHarmony有氧拳击设备端的开发》后,本次为大家带来酷炫的应用端开发。如下,开发者伴随着音乐,律动出拳后,那开发板屡屡播放“挨打”效果,这究竟是怎么一回事?让我们一探背后原理。 这款拳…

一款拥有15000+POC漏洞扫描工具

1 工具介绍 0x01 免责声明 请勿使用本文中所提供的任何技术信息或代码工具进行非法测试和违法行为。若使用者利用本文中技术信息或代码工具对任何计算机系统造成的任何直接或者间接的后果及损失,均由使用者本人负责。本文所提供的技术信息或代码工具仅供于学习&am…

Vue开发者工具安装

通过谷歌应用商店安装(国外网站) 极简插件下载(推荐):下载 → 解压 → 点击左上角的三个小点 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件 https://chrome.zzzmh.cn/index 安装步骤: 安装之后可…

基于C++11实现的手写线程池

在实际的项目中,使用线程池是非常广泛的,所以最近学习了线程池的开发,在此做一个总结。 源码:https://github.com/Cheeron955/Handwriting-threadpool-based-on-C-17 项目介绍 项目分为两个部分,在初版的时候&#x…

142.栈和队列:用栈实现队列(力扣)

题目描述 代码解决 class MyQueue { public:stack<int> stIn; // 输入栈&#xff0c;用于push操作stack<int> stOut; // 输出栈&#xff0c;用于pop和peek操作MyQueue() {}void push(int x) {stIn.push(x); // 将元素压入输入栈}int pop() {// 如果输出栈为空&…

【全网最全】2024电工杯数学建模A题成品论文+前三题完整解答matlab+py代码等(后续会更新成品论文)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 【全网最全】2024电工杯数学建模A题成品论文前三题完整解答matlabpy代码等&#xff08;后续会更新成品论文&#xff09;「首先来看看目前已有的资料&am…

【JAVA WEB实用与优化技巧】如何自己封装一个自定义UI的Swagger组件,包含Swagger如何处理JWT无状态鉴权自动TOKEN获取

目录 一、Swagger 简介1. 什么是 Swagger&#xff1f;2. 如何使用 Swagger3. Springboot 中swagger的使用示例1. maven 引入安装2. java配置 二、Swagger UI存在的缺点1.不够方便直观2.请求的参数没有缓存3.不够美观4.如果是JWT 无状态登录&#xff0c;Swagger使用起来就没有那…

node.js(express)+MongoDB快速搭建后端---新手教程

前言&#xff1a; Node.js是一个基于 Chrome V8引擎的JavaScript运行环境&#xff0c;是对于前端工程师来说学习成本最小的后端实现方法&#xff0c;本篇文章总结如何从0-1写一个后端的登录接口 一、检查node环境 先检查自己的node是否安装 一般来说前端工程师的电脑环境肯定…

(4)医疗图像处理:MRI磁共振成像-成像技术--(杨正汉)

目录 一、特殊成像技术 1.水成像技术 2.化学位移成像技术 二、成像辅助技术 1.脂肪抑制技术 2.磁化转移技术 3.流动补偿技术 4.空间饱和空间标记技术 5.生理门控及导航回波技术 所有的这些技术最终就是为了使得K空间通过傅里叶变化之后得到的图片变的更为清晰。 一、…

用于癌症免疫治疗的自佐剂聚胍纳米疫苗

近期&#xff0c;沈阳药科大学孙进教授团队、罗聪教授团队与新加坡国立大学陈小元教授团队共同合作在美国化学会旗下期刊《ACS nano》&#xff08;IF17.1&#xff09;上发表题为“Self-Adjuvanting Polyguanidine Nanovaccines for Cancer Immunotherapy”&#xff08;用于癌症…

【FPGA】Verilog语言从零到精通

接触fpga一段时间&#xff0c;也能写点跑点吧……试试系统地康康呢~这个需要耐心但是回报巨大的工作。正原子&&小梅哥 15_语法篇&#xff1a;Verilog高级知识点_哔哩哔哩_bilibili 1Verilog基础 Verilog程序框架&#xff1a;模块的结构 类比&#xff1a;c语言的基础…

React Hooks是如何保存的

React 函数式组件是没有状态的&#xff0c;需要 Hooks 进行状态的存储&#xff0c;那么状态是怎么存储的呢&#xff1f;Hooks是保存在 Fiber 树上的&#xff0c;多个状态是通过链表保存&#xff0c;本文将通过源代码分析 Hooks 的存储位置。 创建组件 首先我们在组件中添加两…

浅谈JMeter运行原理

浅谈JMeter运行原理 JMeter架构基础 JMeter基于Java平台开发&#xff0c;运行于Java虚拟机&#xff08;JVM&#xff09;之上。这意味着它可以在任何支持JVM的操作系统上运行&#xff0c;包括Windows、Linux、macOS等。其核心架构设计围绕着多线程执行机制&#xff0c;这使得它…

虚拟机报错:VMX 进程已提前退出。VMware Workstation 无法连接到虚拟机。

解决报错&#xff1a;VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。 VMX 进程已提前退出。 解决方案&#xff1a;右键桌面图标进入VMware Workstation Pro的属性设置&#xff0c;兼容性–勾选“以管理员…