如何让grunt-watch能够实时重新加载正确的CSS文件？

Question

我的目标是使用grunt-watch来在我保存样式表的更改时实时重新加载它。

以下是我的grunt文件。

当我运行grunt时，文件正在被监视，但是正确的css文件没有被重新加载。

我可以在Chrome开发者工具的“网络”选项卡中看到一些样式表正在实时重新加载。

但是，有些样式表没有被实时重新加载，包括我正在进行更改的样式表。

我做错了什么？ 我的“files”选项值是否有误？

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
     watch: {
            css: {
                files: '**/*.css',
                options: {
                    livereload: true
                }
            }
        }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');

};

- edt

---

你提到了 style.css，但是在你的文件列表中有 styles.css，是打错字了吗？ - intuitivepixel

谢谢你发现了这个问题。但是，那不是问题所在。“style.css”只是一个虚构的文件名示例。我已经更新了问题，使用单数形式的“style.css”。 - edt

你能发一下你实际的Gruntfile吗？有时候问题出在最微小的地方。 - Kyle Robinson Young

Kyle，你可能是对的，但我不能发布实际的Gruntfile。我的样式表路径包含一些我不想公开的信息。我的示例和真正的Gruntfile.js之间唯一的区别是'css/style.css'。 - edt

抱歉，以上内容对我有效。请随意在 https://github.com/gruntjs/grunt-contrib-watch/issues 上开一个问题，但我怀疑在 gruntfile 中还有其他我看不到的问题。 - Kyle Robinson Young

Answer 1

我搞清楚了。

问题在样式表的“链接”标记中有一个拼写错误。

“rel”属性中的S是大写的，但它们应该是小写的。

不正确的：

• <link rel="StyleSheet" ...

正确的：

• <link rel="stylesheet" ...

样式表在现场网站上运行良好（网站正常显示），但 grunt-contrib-watch 使用的脚本未能实时重新加载。

一旦我更正了拼写错误，样式表就开始按预期实时重新加载。

- edt

Answer 2

你是否正在使用Chrome LiveReload extension？同时确保你使用的是正确的端口，没有任何冲突。LiveReload默认运行在端口35729上，如果需要可以通过Gruntfile的watch任务传递不同的端口。

- Adam Simpson

---

是的，我正在使用Chrome Live Reload扩展。我该如何检查是否存在冲突？ - edt

如果LiveReload端口上有其他东西（如LiveReload应用程序），Grunt watch会发出警报。 - Adam Simpson

谢谢。我从Grunt没有收到任何警报。 - edt

嗯，很奇怪。尝试在选项块中修改文件路径为 /*.css 然后看看会发生什么。 - Adam Simpson

Answer 3

虽然这可能不是 Grunt 配置问题本身的实际“解决方案”（无论是 grunt 内部问题还是配置问题），但我仍然建议使用 CSS Reload 插件来完成此任务。

然后，您可以使用键盘快捷键（默认为 F9）或上下文菜单中的选项重新加载所有 CSS 文件，而无需重新加载整个页面：

当然，这并不像使用Grunt来完成所有脏活那样优雅，但这是一个稳妥的解决方案。

- mishik

---

谢谢mishik。我一直在使用Google Chrome的tincr扩展来进行实时CSS重新加载。http://tin.cr/ - edt