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

参考地址

Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Deprecation notice 弃用通知

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

这个项目已经启用对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:

一旦这个插件已经安装,你可以在Gruntfile添加以下一行,来启用这个插件。
grunt.loadNpmTasks('grunt-autoprefixer');

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的项。
grunt.initConfig({
  autoprefixer: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options 选项

options.browsers

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:

或者在你的项目根路径下,使用一个名为browserslist全局的配置文件
# Browsers that we support   我们支持的浏览器

> 5% in US
Last 2 versions

Read more about browserslist here.

在这里阅读知道更多的浏览器列表。

options.cascade

Type: Boolean Default value: true

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

设置false来禁用级联缩进。

options.remove

Type: Boolean Default value: true

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

设置false来禁用过时的前缀。

options.diff

Type: Boolean|String Default value: false

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

如果你想要得到一个输出补丁文件,就设置true
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.

还可以指定一个路径,保存该文件。

options.map

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.

options.safe

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
回到顶部