前言
在现代的前端开发中，自动化构建已经成为非常必需的环节。而在自动化构建工具中，Grunt 无疑是很强大也很流行的一个工具。而 grunt-contrib-watch 这个 npm 包则是 Grunt 构建工具中非常重要的部分之一，为开发人员提供了一种方便的方式来监视文件的变化并自动执行任务。
什么是 grunt-contrib-watch
grunt-contrib-watch 是一种 grunt 任务，它会监视指定的源文件（如 LESS、Sass、JavaScript、HTML 等等），在文件变化时自动执行指定的任务，从而方便构建任务的自动化。
安装
Grunt-contrib-watch 可以作为 Grunt 插件安装并使用，我们可以在 package.json 文件中添加如下代码来安装：
"devDependencies": {
"grunt-contrib-watch": "^1.1.0"
}使用
在 Gruntfile.js 配置文件中，我们需要使用 Grunt 配置任务来使用 grunt-contrib-watch 插件，配置如下：
-- -------------------- ---- -------
------ -
-------- -
----------- ---- --------
--
----- -
------ --------------------
------ --------
--
--- -
------ ----------------
------ ----------
--
----- -
------ ---------------
------ -----------
-
-在配置文件中，我们首先需要定义 watch 这个任务，然后在 tasks 中指定在监视到变化之后需要执行的任务。在上面的示例代码中，我们定义了三个监视文件变化的任务，分别是 sass、js 和 html。对应的任务为对应的样式处理、js 压缩和 html 压缩。
实战应用
在实战应用中，Grunt-contrib-watch 可以使用非常简单而又方便，我们可以使用它来自动实时刷新浏览器、自动打包代码等等，下面我们来看一个实现自动刷新浏览器的示例代码：
-- -------------------- ---- -------
------ -
-------- -
----------- ---- --------
--
----- -
------ ----------
--
---- -
------ --------------------
------ -------- ----------
--
--- -
------ ----------------
------ ----------
-
-在上面的代码中，我们首先开启了实时刷新功能，在 HTML、CSS 和 JS 文件中只要有一个文件发生变化就会触发实时刷新浏览器的功能。在 CSS 文件变化时，我们除了需要编译 Sass 还需要执行 postcss 进行自动补全处理，而在 JS 文件变化时我们只需要执行 js 压缩即可。
总结
Grunt-contrib-watch 是一个非常方便实用的任务插件，它让前端开发工程师摆脱了手动进行任务执行的繁琐过程，可以大大提高开发效率。在具体使用过程中，我们需要注意一些细节，例如注入 livereload、配置任务等等，以便实现更加高效的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40127