只用grunt观察css的变化

Question

我在根文件夹中有index.html和styles.css的基本项目设置。我希望我对.css文件的更改在每次单击保存时都会在浏览器中自动刷新。这是我的gruntfile.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']);

};

但是，当我在grunt watch中运行cmd时，我得到：

>> File "styles.css" changed. Warning: Task "css" not found. Use --force to continue. Aborted due to warnings.

我做错了什么？

Answer 1

基本上你的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']);

};