css - 只用 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']);

};

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

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

我做错了什么？

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']);

};