使用 npm 安装 grunt-autoprefixer

简介

Grunt-autoprefixer 是一个自动添加 CSS 浏览器前缀的 Grunt 插件，会根据你设置的目标浏览器版本自动添加适当的前缀。

安装

使用 npm 安装 grunt-autoprefixer：

npm install grunt-autoprefixer --save-dev

使用

在 Gruntfile.js 文件中引用 grunt-autoprefixer：

module.exports = function (grunt) {
  // 加载任务插件
  grunt.loadNpmTasks('grunt-autoprefixer');

  // 配置任务
  grunt.initConfig({
    autoprefixer: {
      options: {
        browsers: ['last 2 versions', 'ie 8', 'ie 9']
      },
      your_target: {
        src: 'path/to/your/css/file.css',
        dest: 'path/to/your/destination/file.css'
      },
    }
  });

  // 注册任务
  grunt.registerTask('default', ['autoprefixer']);
};

在命令行中执行 grunt 命令，即可自动处理 CSS 文件并添加浏览器前缀。

配置

你可以使用选项 browsers 来设置目标浏览器的版本范围，详细的浏览器版本信息可以查阅 Autoprefixer - Browsers。

你也可以使用 cascade 选项来设置是否要将前缀顺序进行嵌套排列。

autoprefixer: {
  options: {
    browsers: ['IE >= 8', 'last 3 versions', 'Chrome >= 10'],
    cascade: false
  }
}

结论

使用 grunt-autoprefixer 可以方便快捷地为项目自动添加浏览器前缀，在 CSS 开发中大为节省时间和精力。