在前端开发中，我们经常需要监听文件的变化，并及时编译或刷新页面。这个过程可以通过使用 Gulp 和 gulp-watch 来自动化完成。
安装 gulp-watch
在使用 gulp-watch 之前，需要先安装 Gulp 和 gulp-watch：
npm install gulp gulp-watch --save-dev
使用 gulp-watch
gulp-watch 的使用非常简单，只需要调用 watch 方法并传入要监视的文件路径和要执行的任务即可。下面是一个示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
-------------------- -------- -- -
-- -- -- -------- -- --
------------------------- -------------------
-- -- --- -------- --- --
--------------------------- --------------------
---
-- -- --
--------------- -------- -- -
--------------- -- -----
---
-- --- --
---------------- -------- -- -
--------------- --- -----
---在上面的示例中，我们定义了两个任务 js 和 css，并分别监视了 ./src/js/**/*.js 和 ./src/css/**/*.css 这两个目录下的文件变化。当文件发生变化时，会自动执行对应的任务。
深度解析 gulp-watch
在实际开发中，我们可能会遇到一些复杂的情况，比如要监视多个目录下的文件，或者要执行多个任务等。gulp-watch 提供了丰富的选项和 API 来满足这些需求。
监视多个目录下的文件
如果要监视多个目录下的文件，可以使用数组来传递文件路径：
watch(['./src/js/**/*.js', './src/lib/**/*.js'], gulp.series('js'));监视新增或删除的文件
默认情况下，gulp-watch 只会监视已存在的文件的变化。如果你想要监视新增或删除的文件，可以使用 events 选项：
watch('./src/js/**/*.js', {
events: ['add', 'change', 'unlink']
}, gulp.series('js'));执行多个任务
有时候我们需要在文件变化时执行多个任务，可以使用 gulp.parallel 方法将多个任务组合起来：
-- -------------------- ---- -------
-------------------- -------- -- -
------------------------- ------------------- ---------
-- ---
---
----------------- -------- -- -
--------------- ---- -----
---监视文件变化的方式
默认情况下，gulp-watch 会使用轮询的方式来监视文件的变化。这种方式效率较低，而且可能会导致 CPU 占用过高。如果你想使用更高效的方式来监视文件的变化，可以使用 chokidar 模块：
-- -------------------- ---- -------
----- ----- - ----------------------
----- -------- - --------------------
------------------------- -
------- ------- --------- ----------
----------- ------ -- ------
----------------- ----- -- --------------
---- ------------- -- ------
-- -------- -- -
--------------- -- -----
-------------- -------- -- -
-- ---------- -------- ----------
------------- - --------------------------- -
-------- -----------
----------- -----
-------------- ----
---
---在上面的示例中，我们使用了 chokidar 模块来代替 gulp-watch 默认的监视器，并关闭了轮询方式。这样可以有效提高性能。
结论
通过使用 Gulp 和 gulp-watch，我们可以快速而方便
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44245