文件变化时自动刷新页面是前端开发中常用的一项技术，而 grunt-contrib-livereload 是一款能够自动刷新页面的 NPM 包。本文将为大家详细介绍该包的使用方法。
安装
在使用 grunt-contrib-livereload 之前，你需要先安装 Grunt。如果你还未安装 Grunt，可以通过以下命令进行安装：
npm install -g grunt-cli
接下来可通过以下命令安装 grunt-contrib-livereload：
npm install grunt-contrib-livereload --save-dev
配置
在项目根目录下创建 Gruntfile.js 文件，然后在文件中加入以下配置：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-- ------
------ -
-------- -
----------- ---- -- --------
--
-- ---------
------ --------
-
---
------------------------------------------
-上述配置代码中，我们通过 grunt-contrib-watch 插件监听文件改动。通过设置 options.livereload 属性为 true 来开启实时刷新功能。
运行
已经配置好 Grunt 和 grunt-contrib-livereload 插件后，我们需要在命令行中运行以下命令：
grunt watch
该命令将启动 watch 任务，系统将自动监测文件的变化，如果有变化，系统将通过浏览器自动刷新页面。
示例代码
下面是一段完整的示例代码：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------ -
-------- -
----------- ----
--
----- -
------ -------------
--
---- -
------ ------------
--
--- -
------ -----------
-
-
---
------------------------------------------
----------------------------- -----------
--在上述示例代码中，我们对不同类型的文件进行了分类，以加快 Grunt 的监测速度。
通过本文的介绍，相信大家对 NPM 包 grunt-contrib-livereload 的使用有了一定的了解。希望这篇文章能够对大家在前端开发中使用 grunt-contrib-livereload 提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64981