为什么我的 grunt autoprefixer 不起作用？

Question

我不知道为什么这段代码在一段时间后停止工作。它正在精简代码但不添加任何供应商前缀。我还想将另一个文件添加到 css 中，例如 normalize，但它也没有用。这是代码：

  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

uglify: {
  dist: {
    options: {
      banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
    },
    files: {
      'js/scripts.min.js' : [

      ]
    }
  },
  dev: {
    options: {
      banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
      beautify: true,
      compress: false,
      mangle: false
    },
    files: {
      'js/scripts.js' : [

      ]
    }
  }
},
sass: {
  dist: {
    options: {
      compass: true,
      style: 'expanded'
    },
    files: [{
      expand: true,
      cwd: 'sass',
      src: [
        'style.scss'
      ],
      dest: 'css',
      ext: '.css'
    }]
  }
},
watch: {
  styles: {
    files: ['**/*.scss'],
    tasks: ['style']
  }
},
postcss: {
  options: {
    map: {
      inline: false, // save all sourcemaps as separate files...
      annotation: 'css/maps/' // ...to the specified directory
    },

    processors: [
      require('pixrem')(), // add fallbacks for rem units
      require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
      require('cssnano')() // minify the result
    ]
  },
  dist: {
    src: 'css/style.css',
    dest: 'css/styles.min.css'
  }

}});

编辑，我在片段中包含了整个 grunt 文件。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    uglify: {
      dist: {
        options: {
          banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
        },
        files: {
          'js/scripts.min.js' : [

          ]
        }
      },
      dev: {
        options: {
          banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
          beautify: true,
          compress: false,
          mangle: false
        },
        files: {
          'js/scripts.js' : [

          ]
        }
      }
    },
    sass: {
      dist: {
        options: {
          compass: true,
          style: 'expanded'
        },
        files: [{
          expand: true,
          cwd: 'sass',
          src: [
            'style.scss'
          ],
          dest: 'css',
          ext: '.css'
        }]
      }
    },
    watch: {
      styles: {
        files: ['**/*.scss'],
        tasks: ['style']
      }
    },
    postcss: {
      options: {
        map: {
          inline: false, // save all sourcemaps as separate files...
          annotation: 'css/maps/' // ...to the specified directory
        },

        processors: [
          require('pixrem')(), // add fallbacks for rem units
          require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
          require('cssnano')() // minify the result
        ]
      },
      dist: {
        src: 'css/style.css',
        dest: 'css/styles.min.css'
      }

    }

  });



  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-postcss');

  // Default task(s).
  grunt.registerTask('style', [
    'sass',
    'postcss'
  ]);

  // Default task(s).
  grunt.registerTask('default', [
    'uglify:dist',
    'sass',
    'postcss',
    'watch'
  ]);

};

Answer 1

我认为问题可能在于它不支持最后 3 个版本指令，这就是它不添加任何内容的原因。

以下是 autoperfixer 处理器可能解释的可能参数的参考：https://github.com/ai/browserslist

尝试使用类似的东西：

last 2 versions

希望这对您有所帮助，因为其他一切似乎都是正确的。

为什么我的 grunt autoprefixer 不起作用？

Why my grunt autoprefixer does not work?

gruntjs

autoprefixer