[grunt] grunt-autoprefixer 介绍
发布于 4 年前 作者 qjzd 2366 次浏览 来自 码农



Deprecation notice 弃用通知

This project has been deprecated in favour of grunt-postcss.


Getting Started 入门指南

This plugin requires Grunt ~0.4.0

If you haven’t used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you’re familiar with that process, you may install this plugin with this command:

这个插件依赖Grunt  `~0.4.0`
如果你之前还没有接触过Grunt, 务必先阅读Grunt入门指南, 它会解释如何创建一个GruntFile,以及安装使用Grunt插件。一旦你熟悉了这些流程, 你就可以使用以下命令安装插件。
npm install grunt-autoprefixer --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The “autoprefixer” task 任务autoprefixer

Overview 概览

In your project’s Gruntfile, add a section named autoprefixer to the data object passed into grunt.initConfig().

在你项目的Gruntfile中,在方法grunt.initConfig()中, 添加名为autoprefixer的项。
  autoprefixer: {
    options: {
      // Task-specific options go here.
    your_target: {
      // Target-specific file lists and/or options go here.

Options 选项


Type: Array Default value: an array with default browsers

You can specify browsers actual for your project using this option:

Default value   带有默认浏览器的数组
options: {
  browsers: ['last 2 versions', 'ie 8', 'ie 9']

Or using a global config file named browserslist at the root of your project:

# Browsers that we support   我们支持的浏览器

> 5% in US
Last 2 versions

Read more about browserslist here.



Type: Boolean Default value: true

Pass false to disable ‘cascade’ indentation. Read more here.



Type: Boolean Default value: true

Pass false to disable outdated prefixes cleaning. Read more here.



Type: Boolean|String Default value: false

Set it to true if you want to get an output patch file:

options: {
  diff: true // or 'custom/path/to/file.css.patch'

Also you can specify a path where to save this file. More examples in Gruntfile.



Type: Boolean|Object Default value: false

If the map option isn’t defined or is set to false, Autoprefixer will neither create nor update a sourcemap.

If true is specified, Autoprefixer will try to find a sourcemap from a previous compilation step using an annotation comment (e.g. from Sass) and create a new sourcemap based on the found one (or just create a new inlined sourcemap). The created sourcemap can be either a separate file or an inlined map depending on what the previous sourcemap was.

如果没有定义“map”选项或设置为“false”,Autoprefixer sourcemap既不会创建也不会更新sourcemap。

You can gain more control over sourcemap generation by setting an object to the map option:

  • prev (string or false): a path to a directory where a previous sourcemap is (e.g. path/). By default, Autoprefixer will try to find a previous sourcemap using a path from the annotation comment (or using the annotation comment itself if the map is inlined). You can also set this option to false to delete the previous sourcemap.
  • inline (boolean): whether a sourcemap will be inlined or not. By default, it will be the same as a previous sourcemap or inlined.
  • annotation (string): set this option to URL path you wish the annotation comment to be e.g. path/file.css.map (by default, Autoprefixer will save your sourcemap to a directory where you save CSS). This option requires inline to be false or undefined.
  • sourcesContent (boolean): whether original contents (e.g. Sass sources) will be included to a sourcemap. By default, Autoprefixer will add contents only for new sourcemaps or if a previous sourcemap has them.


Type: Boolean Default value: false

Enable or disable PostCSS safe mode.

禁用或启用PostCSS safe mode
options: {
  safe: true

Check out project’s Gruntfile.js for more examples.

Updating prefixes database

$ npm update caniuse-db