使用grunt仅查看css更改

我在根文件夹中有一个包含index.html和styles.css的基本项目设置。我希望每次单击“保存”时，对.css文件所做的更改都会自动刷新浏览器。这是我的GrunFile.js的内容：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      styles: {
              files: ['styles.css'],
              options: {
                  livereload: true
              }
          },
      },
  });

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

  // Default task(s).
  grunt.registerTask('default', ['watch']);

};

但是，当我在

cmd

中运行

grunt watch

时，我得到：

>文件“styles.css”已更改。
警告：未找到任务“css”。使用--force继续。
由于警告而中止。

---

我做错了什么？

基本上你的livereload声明是嵌套错误的，正如上面讨论的“样式”是错误的，我认为这应该适合你：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      livereload:  {
        options: {
        livereload: true
      },
      files: [
        'styles.css'
      ]
      }
    }
  });

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

  // Default task(s).
  grunt.registerTask('default', ['watch']);

};

---

我不确定为什么“风格：{”在那里？你尝试过没有嵌套吗？很好，现在没有错误！但是当我单击css文件上的保存时，我仍然没有得到实时浏览器刷新。有什么帮助吗？你能更新上面的代码吗，也许我会想到答案：）是的，我还在我的html文件中添加了livereload脚本

。仍然没有实时刷新。。有什么帮助吗？试试Chrome上可用的livereload扩展，你不需要脚本，或者至少我不需要。你破解了吗？没有。我安装了扩展，还在livereload属性下添加了端口和主机名。仍然不走运…我得到的错误是

必需的配置属性'watch.livereload.files'丢失了

。哦，等等。放吧livereload下的文件部分，编辑我的答案。。。