如何让 grunt-watch 重新加载正确的 css 文件？答案

【问题标题】：How to get grunt-watch to livereload the correct css file?如何让 grunt-watch 重新加载正确的 css 文件？
【发布时间】：2013-07-19 00:59:53
【问题描述】：

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

我的 grunt 文件在下面。

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

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

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

我做错了什么？我的“文件”选项值有错误吗？

module.exports = function(grunt) {

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

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

};

【问题讨论】：

你提到了style.css，但在你的文件列表中你有styles.css，错字？
感谢您的关注。但是，这不是问题所在。 “style.css”是一个人为的示例文件名。我更新了问题以使用单数“style.css”。
你能发布你的实际 Gruntfile 吗？有时，它是最微小的东西。
Kyle，您可能是对的，但我无法发布实际的 Gruntfile。我的样式表的路径包含一些我不想公开的信息。我的示例和真正的 Gruntfile.js 之间的唯一区别是 'css/style.css'。
Kyle，我粘贴到了我实际的 grunt 文件中。我将示例中的文件值更改为：*/.css

标签： gruntjs grunt-contrib-watch

【解决方案1】：

我想通了。

问题是样式表的“链接”标签中的拼写错误。

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

不正确：

正确：

样式表在实时站点上运行良好（站点显示正常），但没有被 grunt-contrib-watch 使用的脚本实时重新加载。

一旦我纠正了错字，样式表就开始按预期重新加载。

【讨论】：

【解决方案2】：

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

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

当然，这不像让 Grunt 来做所有脏活那样优雅，但却是一个防弹的解决方案。

【讨论】：

谢谢米希克。我一直在使用 Google Chrome tincr 扩展来进行实时 CSS 重新加载。 tin.cr

【解决方案3】：

您使用的是Chrome LiveReload extension 吗？

还要确保您使用的是正确的端口，并且没有任何冲突。 LiveReload 默认在端口 35729 上运行，如果您愿意，可以通过 Gruntfile watch 任务传递不同的端口。

【讨论】：

是的，我正在使用 Chrome Live Reload 扩展程序。如何检查是否存在冲突？
Grunt watch 会在 LiveReload 端口有其他东西时发出警报（例如 LiveReload 应用程序）。
谢谢。我没有收到 Grunt 的任何警报。
嗯，很奇怪。尝试将选项块中的文件路径修改为 /*.css 之类的内容，看看会发生什么。