介绍
在前端开发中，我们经常需要使用 gulp 来构建项目，而 gulp 本身又是基于 gaze 的，所以我们需要使用 gaze 来监听文件变化。但是有时候我们需要在监听文件变化时做一些额外的操作，如更改监听文件的路径或过滤某些文件等。
这时，我们可以使用 npm 包 gulp-hijacking-gaze 来拦截 gaze 的监听事件，实现我们自己的需求。
安装
在项目中安装 gulp-hijacking-gaze：
npm install gulp-hijacking-gaze --save-dev
使用
在 gulpfile.js 中使用 gulp-hijacking-gaze：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -------------------------------
------------------ ---------- -
------ --------------------
---------------------
--------- -----
------- ------------------ --- -
-- --- ---- -----
-- --------------------------- -
------ ----------
-
-----
-
---
-------------------------
---以上示例代码实现了：
- 监听
src目录下的所有文件变化。 - 获取变化的文件列表，过滤掉
.txt后缀的文件。 - 将剩余的文件复制到
dist目录下。
在使用时，可以根据实际需求修改参数。常用参数如下：
interval：监听的时间间隔，默认为 1000ms。filter：过滤文件的函数，接收两个参数：文件名和回调函数。如果需要过滤文件，回调函数传入false；否则传入true。
深度解析
gulp-hijacking-gaze 的核心是拦截 gaze 的监听事件，并在拦截函数中实现我们需要的功能。以下是代码实现的核心部分：
-- -------------------- ---- -------
----- ------------- - ----------------- -
----- ------------ - -------------------
----- ------------------- ------- ------------ -
--------------------- -
----------------
------------- - ----------
--------- - -------------
-
-------------- --------- -------- -
-- ------ --- ------- -- ----- --- --------- -- ----- --- ---------- -
----- ----- - -----
------------------------ ---------------------- -
-- -------------- -
--------------------- --------- ---------
-
---
- ---- -
-------------------- --------- ---------
-
-
-
------ --- ---------------------------------- ---------
--通过继承 gaze 的原型对象，在构造函数中替换 emit 方法，实现事件拦截。当监听到变化事件时，触发 options.filter 函数，判断是否需要拦截。如果需要拦截，则不执行 gaze 的原生事件，而是执行我们自己的事件处理。
学习意义
使用 npm 包 gulp-hijacking-gaze 可以方便地实现在 gulp 项目中监听文件变化的同时，拦截并处理文件变化事件。这有助于优化任务流程，并满足需求的个性化定制。
总结
在 gulp 项目中使用 gulp-hijacking-gaze，可以拦截 gaze 的监听事件，实现个性化的文件变化处理。安装后，可以根据实际需求，修改参数并在 gulpfile.js 中使用即可。实现过程中，核心是继承 gaze 的原型对象，并替换 emit 方法来实现事件的拦截。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551c081e8991b448cf20e