Css Grunt自动引用器没有前缀

我正在涉猎咕噜声。我正在尝试编写一个自动刷新css的任务

这是我的文件

module.exports = function(grunt) {
  'use strict';
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    autoprefixer: {
      options: {
        browsers: ['last 8 versions']
      },
      files: {
        'css/styles.css': 'css/styles.css'
      }
    },
    watch: {
      sass: {
        files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
        tasks: ['sass:dist', 'autoprefixer']
      },
      livereload: {
        files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
        options: {
          livereload: true
        }
      }
    },
    sass: {
      dist: {
        files: {
          'css/styles.css': 'sass/styles.scss'
        }
      }
    }
  });
  grunt.registerTask('default', ['sass:dist', 'autoprefixer', 'watch']);
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

当我运行grunt时，它会说它运行得很好，但是当我检查css文件时，什么都没有处理

---

我错过什么了吗？答案是肯定的，但我想知道什么：

观察任务中的livereload对路径非常挑剔。看看我的答案。

我想为这个问题提供一个更简单的解决方案。对于这个问题，公认的答案是矫枉过正。OP的问题是，autoprefixer任务在应该转换的文件之前缺少一个目标，例如dist:。因此：

autoprefixer: {
  options: {
    browsers: ['last 8 versions']
  },
  files: {
    'css/styles.css': 'css/styles.css'
  }
},

应该是：

autoprefixer: {
  options: {
    browsers: ['last 8 versions']
  },
  dist: { // Target
    files: {
      'css/styles.css': 'css/styles.css'
    }
  }
},

---

仅仅针对src而不是文件难道还不够吗？