css - Grunt autoprefixer 没有前缀

Question

我正在涉足Grunt。我正在尝试编写一个自动为我的css添加前缀的任务。

这是我的 Gruntfile

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 文件时，没有任何处理。

我错过了什么吗？（答案是肯定的，但我想知道是什么:)）

Answer 1

我想为这个问题提供更简单的解决方案。对于这个海报问题，公认的答案是多余的。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'
    }
  }
},

Answer 2

livereload任务内watch对路径很挑剔。看看我对这个问题的回答。