在前端开发中，我们经常需要频繁修改代码并查看效果。而每次手动刷新页面显然效率很低，因此，实现自动化的页面刷新就成为了必备的工具之一。
specular-live-reload 是一款可以在修改代码时自动刷新网页的 npm 包，它可以简单地实现热更新，让你的开发效率大幅提升。
下面，让我们一起学习如何使用 specular-live-reload 来提升前端开发的效率。
安装
首先，我们需要安装 specular-live-reload。在命令行中输入以下命令即可完成安装：
npm install specular-live-reload --save-dev
快速上手
安装完成之后，我们需要在项目中引入 specular-live-reload 并运行它。
在项目根目录下创建一个名为 "gulpfile.js" 的文件，并输入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - --------------------------------
-------- -------- -
----- ------- - -
------- -----------
------ ---------------------- -------------------- -------------------
--
----------------------------
-
--------------- - ---------- -
--------------------------- --------
--线上环境不可用，仅为示例。这段代码使用了 gulp 的 watch 方法，当 "public" 目录下的任意文件发生变化时，就会调用 reload 函数。reload 函数中传递的 options 为 specular-live-reload 的配置项，其中 server 指定了网站根目录，files 则指定了需要监视的文件。
运行上述代码后，当你修改 "public" 目录下的文件时，浏览器会自动刷新，你就可以立即查看最新的变化。
更多配置
除了上述的最简配置方式，specular-live-reload 还支持更多的配置项。
port
这是 specular-live-reload 启动的服务的端口号。可以通过以下方式来指定：
const options = {
server: './public',
files: ['./public/**/*.html', './public/**/*.css', './public/**/*.js'],
port: 8080
};上述代码意味着，启动的服务将运行在 8080 端口上。
delay
这个配置项指定了浏览器刷新的延迟时间，默认是0ms，如果需要调整，可以在 options 中进行指定：
const options = {
server: './public',
files: ['./public/**/*.html', './public/**/*.css', './public/**/*.js'],
delay: 500
};表示浏览器会在500毫秒后自动刷新页面。
reloadDebounce
reloadDebounce 可以对触发浏览器刷新的文件事件进行延迟，并可以减轻浏览器的资源开销以及避免针对某些监视器重复的响应。形式如下：
const options = {
server: './public',
files: ['./public/**/*.html', './public/**/*.css', './public/**/*.js'],
reloadDebounce: 700
};上方代码意味着复合的文件事件将会在700毫秒后被浏览器响应。
结语
在使用 specular-live-reload 后，我们再也不用频繁地手动刷新浏览器来查看代码的效果了。这款 npm 包可以让我们更加专注于代码的开发，同时提高了我们的效率。做前端的你也许会在开发过程中遇到一些困难，但好在像 specular-live-reload 这样的工具可以提供帮助，让我们的开发效率更上个层次。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f032