作为前端开发人员，我们经常要使用 Gulp 来构建自己的项目，并在开发过程中配合实时刷新来增强开发效率。前端自动化构建工具 Gulp 是目前最流行的选择之一，它可以帮助我们简化很多重复、机械的任务，提高我们的开发效率。而 gulp-refresh 就是一个可以实现 Gulp 代码自动刷新的 NPM 包。
什么是 gulp-refresh
gulp-refresh 是 gulp-connect 重启任务的一个简化版本，它提供了一种非常方便快捷的方式实现自动刷新浏览器的效果。这个 NPM 包支持传统的 JS/CSS/HTML 文件系统监听，以及浏览器文件的重新加载。
如何使用 gulp-refresh
安装 gulp-refresh
首先，我们需要先进行 gulp-refresh 的安装。我们可以通过终端/cmd 进入到项目目录并输入以下命令：
npm install gulp-refresh --save-dev
这个命令会在我们的项目文件夹中的 node_modules 目录下安装 gulp-refresh。并且，它被添加到项目的“开发依赖项”中，这意味着我们的生产代码不会包含 gulp-refresh。然后在 gulpfile.js 中以如下方式引用 gulp-refresh：
var refresh = require('gulp-refresh')
编写 Gulp 任务
接下来在 gulpfile.js 中编写任务，使用 gulp-refresh 实现浏览器自动刷新。
-- -------------------- ---- ------- --- ---- - ---------------- --- ------- - ------------------------ ------------------ ---------- - ----------------- ---------------------------- --------------- ---------------------- --- ------------------ ---------- - -- ------------- ------ ---------------------- --------------------------- ---------------- ---展开代码
在这个示例中，我们为一个名为 watch 的 Gulp 任务添加了 gulp-refresh。我们在监听 app 目录下的所有 CSS 和 JS 文件，并在这些文件发生任何变化时执行 build 任务。build 任务负责将代码转移到 public 目录中，并在浏览器中重新加载更改后的网页。
运行 Gulp 任务
我们可以通过终端/cmd 进入到项目目录并输入以下命令：
gulp watch这个命令会在后台运行“watch”任务，并在程序运行时监听来自 app 目录的更改。每当我们对 app 目录下某个文件进行更改时，build 任务都会自动执行，编译更改的代码，并通过刷新浏览器来显示效果。
结论
使用 gulp-refresh 可以为前端开发人员提供一种快捷而简便的方式来自动化代码重新构建和浏览器刷新。使用 gulp-refresh 不仅能够优化我们的工作流程，更重要的是可以提高我们的效率，让我们更加专注于开发本身。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67595
