gulp入门6:watch

当使用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.mzph.cn/news/844186.shtml

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

相关文章

生产者延迟消息和重试机制

messageDelayLevel1s 5s 10s 30s 1m 2m 3m 4m 5m 6m 7m 8m 9m 10m 20m 30m 1h 2h 延迟消息级别public PutMessageResult putMessage(final MessageExtBrokerInner msg) {//事务消息处理if (tranType MessageSysFlag.TRANSACTION_NOT_TYPE|| tranType MessageSysFlag.TRANSACT…

Android manifest清单文件意外权限来源和合并规则

问题背景 当自写APP发现无缘无故多申请了多个权限,其中一个就是:android.permission.WAKE_LOCK. 一想就知道如果并非自己在APP main中引入的,那就是依赖的库清单文件导入进来的. 定位问题 定位手段 1.manifest-merger-buildVariant-report.txt 根据其内容可知, WAKE_LOCK 权…

揭秘!编写高质量代码的关键:码农必知的黄金法则!

文章目录 一、保持代码的简洁与清晰二、遵循良好的命名规范三、注重代码的可读性四、利用抽象与封装五、遵循SOLID原则六、关注代码性能七、确保代码安全性《码农修行:编写优雅代码的32条法则》编辑推荐内容简介目录前言/序言 在编程的世界里,每一位码农…

源达投顾的客户服务质量怎么样?

在金融服务行业中,客户服务质量是衡量一个公司成功与否的关键因素之一。源达投顾作为一家专业的投资顾问机构,其客户服务质量一直备受关注。那么,源达投顾的客户服务质量怎么样? 一、客户满意度调查方法 为了全面、客观地了解源…

如何使低版本浏览器支持HTML5标签,以及如何实现布局中的左边固定宽度、右边自适应,并设置滚动条自动选择最高的那个

要让低版本浏览器支持HTML5标签,可以使用以下方法: 1:使用 HTML5 Shiv 库: HTML5 Shiv 是一个 JavaScript 库,可以让低版本的 IE 浏览器(IE6-IE9)识别和渲染 HTML5 标签。使用方法如下: <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/lib…

通讯录恢复怎么办?保护珍贵联系信息的2个必备技能!

手机通讯录扮演着重要的角色&#xff0c;它不仅仅是一个简单的联系方式列表&#xff0c;更是我们与亲朋好友、同事、业务伙伴等之间关系的见证。万一不慎丢失或误删通讯录&#xff0c;学会通讯录恢复的技能变得非常重要。本文将为你介绍几种保护珍贵联系信息的必备技能&#xf…

长文总结 | Python基础知识点,建议收藏

测试基础-Python篇 基础① 变量名命名规则 - 遵循PEP8原则 普通变量&#xff1a;max_value 全局变量&#xff1a;MAX_VALUE 内部变量&#xff1a;_local_var 和关键字重名&#xff1a;class_ 函数名&#xff1a;bar_function 类名&#xff1a;FooClass 布尔类型的变量名…

2024 rk

1.mysql、redis分布式锁 case: 商品秒杀 1)使用 MySQL 作为分布式锁来实现商品秒杀功能可能存在以下几个缺点&#xff1b; 使用 MySQL 作为分布式锁来实现商品秒杀功能可能存在以下几个缺点&#xff1a; 单点故障&#xff1a;如果使用单个 MySQL 实例作为分布式锁的存储介质…

文件包含FI漏洞总结

文件包含漏洞模板 文件包含读取 ?filephp://filter/convert.base64-encode/resourcexxx.php ?filephp://filter/readconvert.base64-encode/resourcexxx.php 文件包含 ?filephp://input ?filefile://c:\boot.ini ?filedata://text/plain;base64,SSBsb3ZlIFBIUAo ?fileph…

yolox-何为混合精度计算AMP?

何为AMP&#xff1f; 全称&#xff1a;Automatic mixed precision自动混合精度。 功能&#xff1a;在神经网络推理过程中&#xff0c;实现针对不同层采用不同的数据精度进行计算&#xff0c;从而实现节省显存和加速训练的目的。 此处提到的不同数据精度包括&#xff1a;32位浮…

【Golang】gin框架如何在中间件中捕获响应并修改后返回

【Golang】gin框架如何在中间件中捕获响应并修改后返回 本文讲述如何捕获中间件响应以及重写响应如果想在中间件中记录响应日志等操作&#xff0c;我们该如何获取响应数据呢&#xff1f;假如需要统一对响应数据做加密&#xff0c;如何修改这个返回数据再响应给客户端呢&#xf…

适合学生党的蓝牙耳机有哪些?盘点四大性价比蓝牙耳机品牌

对于追求高品质音乐体验而又预算有限的学生党来说&#xff0c;一款性价比高的蓝牙耳机无疑是最佳选择&#xff0c;在众多品牌和型号中&#xff0c;如何挑选到既适合自己需求又价格亲民的蓝牙耳机&#xff0c;确实是一个值得思考的问题&#xff0c;作为一个蓝牙耳机大户&#xf…

AI 绘图要如何入门?有哪些好用的软件推荐?(附工具+教程+变现模式)

1.Ai绘画如何入门 不需要把Ai绘画想的很复杂 抛去复杂的应用 使用现成简单的工具 只需要学会提示词 描述你想要的画面即可 提示词 不需要太复杂&#xff0c;也不能太简单&#xff0c;太简单依赖于ai的基本样式&#xff0c;关键是要抓住你想要的核心描述 AI不太擅长理解人类的…

leetcode 712.两个字符串的最小ASCII删除和

思路&#xff1a;LCS&#xff0c;dp 其实就是把dp的状态信息变了一下&#xff0c;但是本质上的状态转移其实是没有很大的变动&#xff0c;既然是让我们删除其他不一样的字符&#xff0c;那么保留下来的肯定就是两个字符串的最长公共子序列了。这样的我们就可以设状态方程为最长…

k8s笔记——GVK是什么

文章目录 k8s的GVK是什么查看资源的GVK查看pod查看service查看Deployment查看NameSpace查看Node 参考资料 k8s的GVK是什么 在 Kubernetes 中&#xff0c;GVK 是指 Group、Version 和 Kind 三个字段&#xff0c;用于唯一标识 Kubernetes 资源对象。 Group 指的是 Kubernetes A…

如何批量结构化分汇多工作表sheet?

目录 一、如遇合并表格&#xff0c;注意结构化二、确认主键&#xff0c;合并所有文件数据三、sheet2同理四、案例总结 如果遇到这样情形&#xff0c;多文件夹多文件&#xff0c;多工作表的分汇场景&#xff1b;可以参考以下方法解决。 一、如遇合并表格&#xff0c;注意结构…

脑机接口:是现代医学的外挂,更是瘫痪病人的豪赌

5 月 17 日&#xff0c;马斯克公开表示&#xff0c;继今年年初首次成功将大脑芯片植入患者大脑后&#xff0c;Neuralink 正在寻找第二位受试者接受这项手术。 5 月 20 日&#xff0c;美国食品药品监督管理局 (FDA) 批准了马斯克的 Neuralink 公司为第二位患者植入脑芯片&#…

Python图形界面(GUI)Tkinter笔记(十四):Entry与Button的碰撞(1)

用功能按钮(Button)、单行文本输入框(Entry)、文本框内容读取(get)实现一个极简易的加法运算,及与其他控件的交互,提高体验,主要体现其人机交互的意义。因为Entry()文本输入框没有限制输入内容属性的参数,它是把所有的输入都视作它特有的一个类属性,所以用get()方法读取出…

若依新增页面,在左侧显示菜单栏的页面,可点击

选择指定的某个目录下 菜单名称&#xff0c;路由地址&#xff0c;组件路径这几个是必填的&#xff0c;其他的暂时就不用管了。 菜单名称&#xff1a;就是显示到左侧目录中的名称。 路由地址&#xff1a;自定义&#xff0c;一般写页面名称就可以。 组件路径&#xff1a;根据前端…

PDF打印技巧:如何跳过不需要的页面?如何关闭打印权限?

作为打工人&#xff0c;经常需要打印各种文档&#xff0c;比如PDF文件。今天分享一下PDF文件的两个打印技巧&#xff0c;如果你还不知道&#xff0c;就一起来看看吧&#xff01; 技巧1&#xff1a;打印PDF如何跳过不需要的页面 有时候&#xff0c;一个PDF文件有很多页&#xf…