4

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

我的咕噜声文件在下面。

当我运行 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');

};
4

3 回答 3

1

我想到了。

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

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

不正确：

  • <link rel="样式表" ...

正确的：

  • <link rel="样式表" ...

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

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

于 2013-08-15T16:13:22.007 回答
0

你在使用Chrome LiveReload 扩展吗？

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

于 2013-07-30T13:10:18.643 回答
0

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

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

在此处输入图像描述

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

于 2013-07-25T13:18:19.473 回答