什么是 grunt-contrib-watch？
grunt-contrib-watch 是一个用于前端开发中的监测文件变化、自动编译和刷新浏览器的工具。它可以配合 grunt 自动化构建工具使用，也可以作为独立的 npm 包使用。
如何安装 grunt-contrib-watch？
使用 npm 包管理器进行安装：
npm install grunt-contrib-watch --save-dev
如何使用 grunt-contrib-watch？
基本配置
在 Gruntfile.js 文件中进行配置：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-- -- -------------------
------ -
------ -------------
------ ---------- --------- ------- ----------
-------- -
----------- ----
-
-
---
------------------------------------------
----------------------------- -----------
--以上代码中，配置项 files 用于指定需要监测的文件路径，可以使用一个 glob 模式（如上述示例中的 src/**/* 表示监测 src 文件夹下的所有文件及子文件夹中的所有文件）；配置项 tasks 用于定义文件变化后需要执行的任务列表；options 配置项中，livereload 用于启动浏览器自动刷新功能。
示例代码
在 watch 任务中添加 browserSync （自动刷新浏览器插件）和 connect （启动本地服务器插件）任务：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-- -- -------------------
------ -
-------- -
----------- ----
--
-- -- ---- ----
----- -
------ ----------
--
-- -- ---- ----
----- -
------ -------------------
------ --------
--
-- -- -- ----
--- -
------ ------------
------ ----------
-
--
-- -- ---------- --
----- -
----- -
------ -
-------------- - -------------
-
-
--
-- -- -------------------- --
------- -
----- -
------ -
---------------- - -----------
-
-
--
-- -- --------------------- --
-------- -
------- -
-------- -
----- ----
-
-
--
-- -- ------------------ --
------------ -
-------- -
--- - --------------- ----------- ------------
--
-------- -
---------- -----
------- ----
-
-
---
-- ----- ----- --
-----------------------------------
-- ------
----------------------------- -------- --------- ---------- -------------- ----------
--运行 grunt 命令，即可启动监测 sass 和 js 文件变化、自动编译、自动刷新浏览器、启动本地服务器等一系列功能。
总结
grunt-contrib-watch 是一个非常实用的前端开发工具，可以提高开发效率、减少手动操作成本。通过本文介绍的使用教程和示例代码，希望能够帮助到初学者和有一定经验的前端工程师对该工具有更深入的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd40