在前端开发中，我们经常需要对样式文件进行修改和调试。但是每次修改后都需要手动刷新页面来查看效果，这非常浪费时间和精力。为了提高开发效率，我们可以通过自动化工具来实现样式文件的自动刷新。
Grunt 是一个流行的前端自动化构建工具，它可以帮助我们自动执行任务并生成优化后的代码。Watch 是 Grunt 的监视插件，用于监控文件的变化并执行指定的任务。LiveReload 是一个浏览器插件，它可以在样式发生改变时自动刷新页面。结合这三个工具，我们可以实现 Sass/CSS 的自动刷新。
步骤
1. 安装必要的工具
首先，我们需要安装 Node.js 和 Grunt CLI。打开终端并运行以下命令：
$ brew install node $ npm install -g grunt-cli
安装完成后，我们需要在项目中安装 Grunt 和 Watch 插件。在项目根目录下运行以下命令：
$ npm install grunt --save-dev $ npm install grunt-contrib-watch --save-dev
2. 配置 Gruntfile.js
在项目根目录下创建 Gruntfile.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------ -
----- -
------ --------------
------ --------------
-------- -
----------- -----
--
--
--
----- -
----- -
------ -
------------ -------------
--
--
--
---
------------------------------------------
-----------------------------------------
----------------------------- -----------
--上述代码中，我们首先定义了一个名为 watch 的任务，用于监视所有 .scss 文件的变化。当文件发生变化时，它会自动执行 sass:dist 任务，并开启 LiveReload 功能。
其中，sass:dist 任务用于编译 Sass 文件并生成 CSS 文件。在这里我们只编译了一个 style.scss 文件，并将输出文件名设置为 style.css。
最后，我们通过 grunt.registerTask 注册了默认任务为 watch，即运行 grunt 命令时会自动执行 watch 任务。
3. 配置 LiveReload
接下来，我们需要在浏览器中安装 LiveReload 插件。插件的安装方式因浏览器而异，请参照对应浏览器的说明进行安装。
安装完成后，在页面中添加以下代码：
<script src="//localhost:35729/livereload.js"></script>
这段代码会加载 LiveReload 脚本，并与 Gruntfile.js 中的配置进行通信。当样式文件发生改变时，LiveReload 会自动刷新页面。
4. 运行 Grunt
最后，在终端中运行以下命令启动 Grunt 任务：
$ grunt
此时，Grunt 会监视所有 .scss 文件的变化，并在文件发生改变时自动编译和刷新样式。我们可以通过修改 style.scss 文件来测试是否成功实现了自动刷新。
总结
本文介绍了如何使用 Grunt、Watch 和 LiveReload 实现 Sass/CSS 的自动刷新。通过上述步骤，我们可以大大提高样式调试的效率，减少手动刷新页面的重复工作。同时，这也为我们了解前端自动化工具提供了一个较好的参考案例。
示例代码：GitHub
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30163