首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是否可以在gulp4 gulp.watch任务中获取文件名?

是的,可以在gulp4的gulp.watch任务中获取文件名。在gulp4中,gulp.watch方法返回一个文件变化的事件流,可以通过监听该事件流来获取文件名。具体的实现步骤如下:

  1. 首先,安装gulp和gulp-watch插件:
代码语言:txt
复制
npm install gulp gulp-watch --save-dev
  1. 在gulpfile.js文件中引入gulp和gulp-watch插件:
代码语言:txt
复制
const gulp = require('gulp');
const watch = require('gulp-watch');
  1. 创建一个gulp任务,并使用gulp.watch方法监听文件变化:
代码语言:txt
复制
gulp.task('watch', function() {
  return watch('src/**/*.js', function(file) {
    console.log(file.path); // 打印文件路径
    console.log(file.basename); // 打印文件名
  });
});

在上述代码中,我们使用gulp.watch方法监听了src目录下所有.js文件的变化,并在文件变化时打印了文件路径和文件名。

  1. 运行gulp任务:
代码语言:txt
复制
gulp watch

当文件发生变化时,gulp会输出文件路径和文件名。

这样,我们就可以在gulp4的gulp.watch任务中获取文件名了。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。

腾讯云对象存储(COS)是一种高可用、高可靠、强安全的云端存储服务,适用于存储和处理任意类型的文件,包括文本、图片、音视频等。它提供了简单易用的API接口和丰富的功能,可以满足各种存储需求。

产品介绍链接地址:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

9012教你如何使用gulp4开发项目脚手架

本文将会介绍如何使用gulp4来搭建项目脚手架,如果您还在使用gulp3或更老的版本,您也以通过本文的一些思想将之前的项目进行完善,更新。...该脚手架的设计思路和功能如下: 同时为了提高开发环境的效率,这里我们参考webpack的配置,区分开发环境和生产环境,接下来将会具体介绍。...gulp-file-include来导入到html,images和css大家都比较清楚,分别时存放image和css文件的目录。...监听js变化 gulp.watch('src/css/*', gulp.series('css')); // 监听css变化 gulp.watch('src/images/*', gulp.series...脚手架选型上,也不一定非要用gulp,webpack,一般的经验是传统型的静态网站适合用gulp,由于不需要编译es6,所以有更小的体积,当然也可以用webpack,本文主要是给大家提供一使用gulp4

1.4K10

PHP检测一个类是否可以被foreach遍历

PHP检测一个类是否可以被foreach遍历 PHP,我们可以非常简单的判断一个变量是什么类型,也可以非常方便的确定一个数组的长度从而决定这个数组是否可以遍历。那么类呢?...我们要如何知道这个类是否可以通过 foreach 来进行遍历呢?其实,PHP已经为我们提供了一个现成的接口。...而第二个 $obj2 则是实现了迭代器接口,这个对象是可以通过 Traversable 判断的。PHP手册,Traversable 接口正是用于检测一个类是否可以被 foreach 遍历的接口。...这是一个无法 PHP 脚本实现的内部引擎接口。IteratorAggregate 或 Iterator 接口可以用来代替它。...相信我们决大部分人也并没有使用过这个接口来判断过类是否可以被遍历。但是从上面的例子我们可以看出,迭代器能够自定义我们需要输出的内容。相对来说比直接的对象遍历更加的灵活可控。

2K10
  • 快速搭建gulp项目实战

    gulp是前端开发过程对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率...安装NodeJS,自行在node官网下载,并安装,通过node-v检查是否安装成功 ?...2.命令运行安装本地Gulp环境 cnpm install gulp --save-dev 3.本地文件新建文件名为 gulpfile.js 文件:  常用的一些方法 gulp.task 定义任务...gulp.src 找到执行文件 gulp.dest 执行任务的文件去出 gulp.watch 观察文件是否发生变化 4.安装一些常用的压缩包 cnpm install gulp-minify-css...自动编译 目录的结构 ?

    1.1K20

    前端构建工具gulpjs的使用介绍及技巧

    新建一个文件名为gulpfile.js的文件,然后放到你的项目目录。之后要做的事情就是gulpfile.js文件定义我们的任务了。...要运行gulp任务,只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具),然后命令行执行gulp命令就行了,gulp后面可以加上要执行的任务名...而在Gulp,使用的是Nodejs的stream(流),首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如Gulp的插件,经过插件处理后的流又可以继续导入到其他插件...3.4 gulp.watch() gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。...用gulp.dest()方法写入文件时,文件名使用的是文件流文件名,如果要想改变文件名,那可以之前用gulp-rename插件来改变文件流文件名

    1.9K30

    gulp 详解与使用

    首先获取到需要的 stream ,然后可以通过 stream 的 pipe() 方法把流导入到你想要的地方,比如 gulp 的插件,经过插件处理后的流又可以继续导入到其他插件,当然也可以把流写入到文件...再回到正题上来,gulp.src() 方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象存储着原始文件的路径、文件名、内容等信息...有三种方法可以实现: 第一:异步操作完成后执行一个回调函数来通知 gulp 这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。...gulp.watch() gulp.watch() 用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。...为改变 console.log(event.path); //变化的文件的路径 }); gulp 的插件 gulp 本身虽然不能完成很多任务,但它有大量插件可用,我们可以 插件页面 或者 npm

    1.2K10

    Gulp使用指南

    一.基本介绍 gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程很多重复的任务能够使用正确的工具自动完成;使用她,不仅可以很愉快的编写代码...新建一个文件名为gulpfile.js的文件,然后放到你的项目目录。之后要做的事情就是gulpfile.js文件定义我们的任务了。...  要运行gulp任务,只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具),然后命令行执行gulp命令就行了,gulp后面可以加上要执行的任务名...gulp,使用的是Nodejs的stream(流),首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如gulp的插件,经过插件处理后的流又可以继续导入到其他插件...3.watch gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。

    1.3K60

    【DB笔试面试797】Oracle可以从exp出来的dmp文件获取哪些信息?

    ♣ 题目部分 Oracle可以从exp出来的dmp文件获取哪些信息? ♣ 答案部分 开发中常常碰到,需要导入dmp文件到现有数据库。...那么如何从现有的dmp文件获取到这些信息呢?下面作者将一一讲解。...(一)获取基本信息:导出的版本、时间、导出的用户 下面的示例exp_ddl_lhr_02.dmp是生成的dmp文件: [ZFZHLHRDB1:oracle]:/tmp>strings exp_ddl_lhr...其中,软件Pilotedit可以轻松打开上G的文件。示例如下: ? 需要注意的是,十六进制Linux和Windows下顺序不同。...& 说明: 将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库可以参考我的BLOG:http://blog.itpub.net/26736162/viewspace-2138791

    2.5K30

    gulp入门(小白级别)

    case2 执行多个任务 gulp执行多个任务可以通过任务依赖来实现。...有三种方法可以实现: (1)异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。...使用的是Nodejs的stream(流),首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如Gulp的插件,经过插件处理后的流又可以继续导入到其他插件...而gulp.src()方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象存储着原始文件的路径、文件名、内容等信息。...构建后的结果file1_2没有txt文件 3.3 gulp.watch() gulp.watch() 用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。

    1.3K20

    前端工程化 | 定制专属提速“外挂”(上)

    咱们学习使用Gulp的目的是提升开发效率,把开发过程重复性的工作交给Gulp,让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口,可以根据这些接口来开发Gulp插件。...但是,开发的过程我们是希望当我们对网页文件(包括HTML、CSS、JS、LESS文件等)做了修改,浏览器能够自动刷新网页。...browser-sync是一款浏览器同步测试工具,可以单独使用,也可以插入到Gulp、Grunt等工作流里使用,该篇文章主要介绍browser-syncGulp的使用。...2.6 查看browser-sync使用效果 Tips:gulp + 任务名称是用来执行gulp的任务。...Gulp可以使用gulp-clean-css对CSS文件进行压缩处理。 Tips:带宽是指在单位时间(一般指的是1秒钟)内能传输的数据量。

    1K50

    不拆分单词也可以做NLP,哈工大最新模型多项任务打败BERT,还能直接训练中文

    由于不用分词,这个WordBERT还可以直接进行中文训练。 更值得一提的是,它在性能提升的同时,推理速度并没有变慢。 可谓一举多得。...它在高中题比BERT高了3.18分,初中题高了2.59分,这说明WordBERT复杂任务具有更高的理解和推理能力。...词性标注、组块分析和命名实体识别(NER)等分类任务,WordBERT的成绩如下: 相比来看,它在NER任务上的优势更明显一些(后两列)。...对于“中文版”WordBERT-ZH,研究人员CLUE benchmark上的各种任务测试其性能。...结果,WordBERT-ZH四项任务中都打败了所有其他对比模型,全部五项任务上的表现都优于基线BERT,并在TNEWS(分类)、OCNLI(推理)和CSL(关键字识别)任务上取得了3分以上的差距。

    1K40

    给初学者的Gulp教程(译)

    如果你没有安装,你可以在这个网页来获取安装包。 当你安装好Node后,你可以通过使用下列命令行来安装Gulp。...你也可以命令行运行相同的任务,通过gulp task-name 为了测试它,让我们创建一个hello任务,来说Hello Zell!...我们可以Node globs的帮助下完成(globs参数是文件匹配模式,类似正则表达式,用来匹配文件路径包括文件名)。 供参考:Gulp-sass使用LibSass来将Sass转换成CSS。...Node的Globbing Globs是匹配文件模式,允许你gulp.src增加多个文件。它就像正则表达式一样,但是只用来表示文件路径。 当你使用glob,计算机检查文件名和路径以特定的特征。...我们可以命令行运行gulp build来运行这个任务

    4.3K20

    Gulp 前端自动化构建工具

    Gulp 是基于 NodeJS 的前端自动化构建工具,项目开发过程自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务...,操作上使用了 NodeJS 的 stream (流),通过 pipe() 方法导入到指定的地方,将前一级的输出,作为后一级的输入,不再需要进行频繁的 IO 操作,但需要注意的是,这里的流内容,并非原始的文件流...,以保存项目相关信息,该文件也可以手动新建,具体信息如下所示,需要注意的是,json 文件里不能写注释,复制完之后记得把注释删除{ "name": "gulp-niangao", //项目名称(必须...,该任务将 /src/less 文件下的 test.less 文件,转换为 test.css 文件,该文件将在 /buil/css 下生成,文件目录结构如下所示实际开发过程,我们定义了多个类似 less...;我们看到通过 .run 方法进行任务关联时,提示该方法已被弃用,建议使用任务依赖或 gulp.watch 任务进行触发,该 API 起到了文件监听的作用,当 gulp.src 匹配的路径下的文件发生了更改

    1.8K41

    linux 我安装了一个命令行,是否所有用户都可以使用这个命令,比如 docker?

    ---- 问: linux系统里,普通用户目录是 /home 下,root用户目录在 /root,因此全部用户共享目录的。 那如果我们要装一个东西的话,是不是只用装一遍?...(比如说ohmyzsh之类的) 我之前自己服务器上,每次都需要安装两遍,一次只有当前那个用户生效,这是为什么呢?...---- 答: 不一定,当我们说我们 linux 装了一个东西,指的是:「我们装了一个命令,可全局执行」。此时是将该命令放在了全局执行目录(或者将该命令目录放在了 $PATH)。...哦对,PATH 该路径列表可自定义,而每一个用户都可以有独立的 PATH 环境变量。...所以,要看一个命令是所有用户共享还是仅对当前用户有效,具体要看该命令是怎么装的,可以看看 which command 进一步排查。

    7.3K60

    PNAS:基于脑电在线神经反馈调节唤醒程度可以改善个体高难度感觉运动任务的表现

    来自哥伦比亚大学的Josef Faller等人在PNAS上发文,其发现唤醒程度唤醒程度会影响个体的决策与判断,通过调节个体的唤醒程度唤醒程度,可以改善个体高负载任务的表现。...关键字:神经反馈;耶克斯-多德森定律;人类绩效;边界回避任务;脑电 唤醒程度会影响个体感觉运动任务的表现,通过调节唤醒程度,可以改善个体的任务表现。...BAT任务,被试需要在规定的红色方框范围内操纵虚拟飞机,若飞机超过边框范围则任务失败。 本研究,采用闭环神经反馈系统,关注神经反馈是否可以改善BAT任务表现(见图1C)。...(B)阶段1过程,个体需要在40分钟内完成至少66%的简单任务可以进行阶段2实验。...补充材料图8 基于脑电图的解码器 一句话总结:基于脑机接口的闭环神经反馈系统可以动态调节唤醒程度,提高个体高负载的感觉运动任务的实时表现。该方法可以推广到将自我调节作为靶向治疗的临床应用

    1.1K30

    利用Gulp实现前端打包自动上传服务器

    所以平时开发,时不时都要打个包然后手动打开ftp工具将包上传到测试服务器上,所以这里想有没有什么脚本可以实现打包完成自动上传资源到测试服务器。...done(); }, 2000) })) 注意在这里遇到一个坑,如果使用的是gulp4以上版本,打包命令可按照上面的方法写,如果是gulp4以下版本,按照下面的方法写 gulp.task('deploy...这是因为gulp4与gulp3依赖任务列表写法的改变,具体可看官方文档 series() 还有一个点需要注意:如果出现以下报错: ?...需要手动结束任务done(); 完整代码: const gulp = require('gulp') const GulpSSH = require('gulp-ssh') // eslint-disable-next-line...使用 执行打包的时候运行 npm run deploy:test 这样就会先去打包,然后将打包的文件上传至服务器 总结 目前只是使用gulp简单的实现了一下,如果想搭建完整的自动构建,打包,回滚,监控等可以使用

    1.6K10
    领券