阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Gulp watch 文件监控

    文件监控

    gulp api 中的 watch() 方法利用文件系统的监控程序(file system watcher)将 匹配到的文件对应需要执行的任务(task) 进行关联。

    它对匹配 glob 的文件进行监控,如果有文件被修改了就执行关联的任务(task)。如果被执行的任务(task)没有触发 异步完成信号 信号,它将永远不会再次运行了。

    此 API 的默认设置是基于通常的使用场景的,而且提供了内置的延迟和排队机制。

    const { watch, series } = require('gulp');
    function clean (cb) {
        // body omitted
        console.log('clean');
        cb();
    }
    function javascript (cb) {
        // body omitted
        console.log('run javascript ======');
        cb();
    }
    function css (cb) {
        // body omitted
        console.log('run css ======');
        cb();
    }
    exports.default = function () {
        // 可以只关联一个任务
        watch('src/*.css', css);
        // 或者关联一个任务组合
        watch('src/*.ts', series(clean, javascript));
    };
    

    更改src内的 main.ts文件,就会导致下面的改变

    https://a.axihe.com/npm/gulp/WX20200614-184249.png

    警告:避免同步任务

    就像注册到任务系统中的任务(task)一样,与文件监控程序关联的任务(task)不能是同步任务(synchronous taks)。如果你将同步任务(task)关联到监控程序,则无法确定任务(task)的完成情况,任务(task)将不会再次运行(假定当前正在运行)。

    由于文件监控程序会让你的 Node 进程保持持续运行,因此不会有错误或警告产生。由于进程没有退出,因此无法确定任务(task)是否已经完成还是运行了很久很久了。

    可监控的事件

    默认情况下,只要创建、更改或删除文件,文件监控程序就会执行关联的任务(task)。 如果你需要使用不同的事件,你可以在调用 watch() 方法时通过 events 参数进行指定。可用的事件有 'add''addDir''change''unlink''unlinkDir''ready''error'。此外,还有一个 'all' 事件,它表示除 'ready''error' 之外的所有事件。

    const { watch } = require('gulp');
    
    // 所有事件都将被监控
    watch('src/*.js', { events: 'all' }, function(cb) {
      // body omitted
      cb();
    });
    
    

    初次执行

    调用 watch() 之后,关联的任务(task)是不会被立即执行的,而是要等到第一次文件修之后才执行。

    如需在第一次文件修改之前执行,也就是调用 watch() 之后立即执行,请将 ignoreInitial 参数设置为 false

    const { watch } = require('gulp');
    
    // 关联的任务(task)将在启动时执行
    watch('src/*.js', { ignoreInitial: false }, function(cb) {
      // body omitted
      cb();
    });
    
    

    设置是否队列执行

    watch() 方法能够保证当前执行的任务(task)不会再次并发执行。当文件监控程序关联的任务(task)正在运行时又有文件被修改了,那么所关联任务的这次新的执行将被放到执行队列中等待,直到上一次关联任务执行完之后才能运行。每一次文件修改只产生一次关联任务的执行并放入队列中。

    如需禁止队列,请将 queue 参数设置为 false

    const { watch } = require('gulp');
    
    // 每次文件修改之后关联任务都将执行(有可能并发执行)
    watch('src/*.js', { queue: false }, function(cb) {
      // body omitted
      cb();
    });
    
    

    设置任务执行的延迟时间

    文件更改之后,只有经过 200 毫秒的延迟之后,文件监控程序所关联的任务(task)才会被执行。这是为了避免在同使更改许多文件时(例如查找和替换操作)过早启动任务(taks)的执行。

    如需调整延迟时间,请为 delay 参数设置一个正整数。

    const { watch } = require('gulp');
    
    // 文件第一次修改之后要等待 500 毫秒才执行关联的任务
    watch('src/*.js', { delay: 500 }, function(cb) {
      // body omitted
      cb();
    });
    
    

    使用监控程序实例

    你可能不会使用到此功能,但是如果你需要对被修改的文件进行完全的掌控 (例如访问文件路径或元数据)请使用从 watch() 返回的 chokidar 实例。

    注意: 返回的 chokidar 实例没有队列、延迟和异步完成(async completion)这些功能。

    可选的依赖项

    Gulp 有一个名为 fsevents 的可选依赖项,他是一个特定于 Mac 系统的文件监控程序。如果你看到安装 fsevents 时出现的警告信息 - “npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents” - 这并不是什么问题,忽略即可。 如果跳过 fsevents 的安装,将使用一个备用文件监控程序,后续在 gulpfile 中产生的任何错误都将与此警告无关。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录