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

从gulp watch的.on()事件运行任务

从gulp watch的.on()事件运行任务是指在使用gulp构建工具时,通过监听文件的变化来自动执行相应的任务。.on()方法是gulp.watch()方法的一个事件处理器,用于监听指定文件的变化,并在文件发生变化时执行相应的任务。

具体来说,.on()方法接受两个参数:文件变化的事件类型和要执行的任务。常见的事件类型包括'add'(文件新增)、'change'(文件修改)和'delete'(文件删除)。

当监听到指定文件发生对应事件类型的变化时,.on()方法会触发相应的回调函数,我们可以在回调函数中编写任务的具体逻辑。例如,当监听到文件修改事件时,可以执行压缩、合并等前端开发任务。

以下是一个示例代码:

代码语言:txt
复制
const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('src/js/*.js').on('change', gulp.series('scripts'));
});

在上述代码中,我们定义了一个名为'scripts'的任务,用于压缩JavaScript文件。然后,我们通过gulp.watch()方法监听'src/js/*.js'目录下的文件变化,并在文件修改事件发生时,执行'scripts'任务。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云函数(Serverless):https://cloud.tencent.com/product/scf
  • 云开发(CloudBase):https://cloud.tencent.com/product/tcb
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke

请注意,以上链接仅供参考,具体选择产品需根据实际需求进行评估。

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

相关·内容

Laravel中运行Gulp任务利器(一) —— Laravel Elixir简介及入门教程

对现代开发者而言,即使是构建一个很简单web应用,也要编写很多任务,比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数任务。...Laravel宗旨是让PHP开发变得轻松愉悦,所以Laravel 5开始,提供了一个新被称作LaravelElixirAPI。...你可以通过编写Gulp任务来自动构建这些令人头痛任务,并且可以通过集成成百上千 Gulp插件 来有效节省时间,避免重复造轮子。...不管你使用是什么操作系统,都可以 Node.js官网 下载与之对应安装包。如果你想从源代码编译安装,也可以通过这个链接去下载源码。...你可以通过在项目根目录下运行 gulp 命令来执行定义在 elixir 方法中任务: $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com

2K91

ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中高效应用Grunt和Gulp使用Grunt准备项目配置NPM配置Grunt集成起来监测文件变化与V

,让它可以手动运行或者基数Vistual Studio事件机制自动运行 右键单击项目文件,选择”添加->新项目“,选择”Grunt configuration file”选项,保留默认文件名,并点击添加按钮...方法调用让任务显示在Task Runner Explorer中 grunt.loadNpmTasks('grunt-contrib-watch'); 运行Watch任务,命令行窗体将处在等待状态,此时它监视着文件变化...与Visual Studio事件一起协作 你除了可以手动运行这些任务之外,你还可以把这些任务和Visual Studio事件绑定,当Visual Studio触发既定事件后,自动运行定义任务 在Task...('wwwroot/lib')) }); watch任务也和grunt示例非常相似 gulp.task("watch", function () { gulp.watch("TypeScript.../*.js", ['all']); }); 使用同样方式,在Task Runner Explorer中绑定Visual Studio事件,就可以让watch任务在项目打开时自动执行了。

3K70

用 Linux watch 命令观察命令和任务

了解 watch 命令如何让你知道任务已完成或命令已执行。 有很多时候,你需要等待一些事情完成,比如: 一个文件下载。 创建或解压一个 tar 文件。 一个 Ansible 作业。...其中一些进程有进度指示,但有时进程是通过一层抽象运行,衡量进度唯一方法是通过其副作用。其中一些可能是: 一个正在下载文件不断增长。 一个 tarball 中提取目录被文件填满了。...使用 watch watch 命令定期运行一个命令并显示其输出。它有一些文本终端特性,所以只有最新输出才会出现在屏幕上。 最简单用法是:watch 。...例如,要计算审计事件: $ watch 'grep audit: /var/log/kern.log |wc -l' 在最后一个例子中,如果有一个可视化指示,表明审计事件数量发生了变化,这可能是有用...-type f | xargs grep suspicious-pattern' 用 watch 观察一个命令 watch 命令对于许多临时性系统管理任务非常有用,在这些任务中,你需要在没有进度条情况下等待一些耗时步骤

76520

用 Linux watch 命令观察命令和任务

其中一些进程有进度指示,但有时进程是通过一层抽象运行,衡量进度唯一方法是通过其副作用。其中一些可能是: 一个正在下载文件不断增长。 一个 tarball 中提取目录被文件填满了。...使用 watch watch 命令定期运行一个命令并显示其输出。它有一些文本终端特性,所以只有最新输出才会出现在屏幕上。 最简单用法是:watch 。...例如,要计算审计事件: $ watch 'grep audit: /var/log/kern.log |wc -l' 在最后一个例子中,如果有一个可视化指示,表明审计事件数量发生了变化,这可能是有用...如果变化是预期,但你想让一些东西看起来“不同”,watch --differences 就很好用。它可以高亮显示与上次运行任何差异。...-type f | xargs grep suspicious-pattern' 用 watch 观察一个命令 watch 命令对于许多临时性系统管理任务非常有用,在这些任务中,你需要在没有进度条情况下等待一些耗时步骤

81620

watch 命令 Linux 观察命令和任务

使用 watch watch 命令定期运行一个命令并显示其输出。它有一些文本终端特性,所以只有最新输出才会出现在屏幕上。 最简单用法是:watch 。...例如,要计算审计事件: $ watch 'grep audit: /var/log/kern.log |wc -l' 在最后一个例子中,如果有一个可视化指示,表明审计事件数量发生了变化,这可能是有用...如果变化是预期,但你想让一些东西看起来“不同”,watch --differences 就很好用。它可以高亮显示与上次运行任何差异。...控制频率 最后,有时该命令可能是资源密集型,不应运行得太频繁。-n 参数控制频率。...-type f | xargs grep suspicious-pattern' 用 watch 观察一个命令 watch 命令对于许多临时性系统管理任务非常有用,在这些任务中,你需要在没有进度条情况下等待一些耗时步骤

79330

用 Linux watch 命令观察命令和任务

了解 watch 命令如何让你知道任务已完成或命令已执行。 有很多时候,你需要等待一些事情完成,比如: 一个文件下载。 创建或解压一个 tar 文件。 一个 Ansible 作业。...其中一些进程有进度指示,但有时进程是通过一层抽象运行,衡量进度唯一方法是通过其副作用。其中一些可能是: 一个正在下载文件不断增长。 一个 tarball 中提取目录被文件填满了。...使用 watch watch 命令定期运行一个命令并显示其输出。它有一些文本终端特性,所以只有最新输出才会出现在屏幕上。 最简单用法是:watch 。...例如,要计算审计事件: $ watch 'grep audit: /var/log/kern.log |wc -l' 在最后一个例子中,如果有一个可视化指示,表明审计事件数量发生了变化,这可能是有用...-type f | xargs grep suspicious-pattern' 用 watch 观察一个命令 watch 命令对于许多临时性系统管理任务非常有用,在这些任务中,你需要在没有进度条情况下等待一些耗时步骤

1.5K10

构建工具Gulp-lesson3

写作背景: 在前面两节提到任务gulp 执行得到了相应产物,但是当文件修改过后我们依然需要再次执行命令来进行构建,但是在开发过程中,gulp 同样支持我们通过 watch 来对文件进行监控,每当监控到文件变动就触发所关联构建任务...什么事件可以被监控: 在默认情况下,文件创建、更改、删除会触发关联任务执行。...但实际中可能需要监控更多事件watch 函数提供第二个参数 events 将允许我们配置对应事件事件列表如:'add'、'addDir'、'change'、'unlink'、'unlinkDir...// body omitted cb(); }); 注:上面的代码来自 gulp 官网; 立即执行: 在调用 watch 后所关联任务默认不会立即触发执行,而是需要等第一次触发文件变化事件后才执行...function(cb) { // body omitted cb(); }); 注:上面的代码来自 gulp 官网; 延迟应用: watch 函数参数 2 选项支持配置 delay 指定毫秒数来延迟在文件变化后触发关联任务事件

28230

对比webpack,你更应该先掌握gulp【10分钟教你彻底掌握gulp

gulp核心api task, series, parallel, src, pipe, dest, on, watch task: 创建一个任务 series:顺序执行多个任务 prallel:并行执行多个任务...src:读取数据源转换成stream pipe:管道-可以在中间对数据流进行处理 dest:输出数据流到目标路径 on:事件监听 watch:数据源监听 这些api在demo中都有用一个例子串起来讲解使用...,去执行format任务,format任务又依赖concat任务执行 gulp.task('watch', () => { // 因为是需要顺序执行子任务,所以用concat,如果是需要并行执行的话用...() => { // 更多事件监听可以查看官方文档 console.log('watch: 文件被改变'); }) }) 在项目目录下执行 以上几步代码合并到一个gulpfile.js文件中即可运行...# 监控20201108文件夹下所有文件变化,则执行format子任务 $ gulp watch 下图为命令行中输入日志 ?

1.1K40

在 ASP.NET Core 项目中使用 npm 管理你前端组件包

:输出文件到指定路径;   gulp.task:定义一个任务;   gulp.watch:监听文件变化。   ...当我们创建好任务后,删除 wwwroot 路径下引用第三方组件包,运行我们示例项目,毫无疑问,整个页面的样式都已经丢失了。 ?   选中 gulpfile.js,右键打开任务运行程序资源管理器。...可以看到,系统会自动显示出我们定义所有任务,这时,我们可以鼠标右键点击任务,选中运行,即可执行我们任务。 ?   然而,我们手动去执行似乎有些不智能,我们能不能自动执行某些任务呢?...答案当然是可以,同样是鼠标右键点击任务,点击绑定菜单选项,我们就将定义好任务绑定事件上。 ?   ...PS:如果你将任务绑定到项目打开事件上,则是需要下一次打开项目时才能自动执行。 ?

1.8K30

YARN任务运行Token

本文主要讲述yarn任务提交运行过程中涉及几个重要token:AMRMToken,NMToken,ContainerToken。...AMRMToken在客户端向RM提交任务后,由RM创建生成,然后通过rpc请求传递给NM;NM通过将token持久化到本地文件,让AM启动后对应文件中加载到token,这样AM就可以使用正确token...任务提交运行流程中可以知道,RM和AM都会和NM通信请求启动container,其中RM向NM请求启动AM;而AM则是向NM请求启动任务container。...【总结】 ---- 小结一下,本文主要讲解了Yarn运行中涉及几个token,具体包括token作用,如何创建,具体使用流程。...另外,除了上面介绍几个token之外,各个任务(mr/spark/flink)在运行时,也还存在一些其他token,例如mr中会用到ClientToAMToken等,有兴趣可以自行摸索下~

66220
领券