gulp常用插件-gulp-autoprefixer

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用它我们可以不必考虑各浏览器兼容前缀，在写完后再自动处理。

github：https://github.com/sindresorhus/gulp-autoprefixer

下面的例子是把index.css加上浏览器前缀。

配置gulpfile.js：

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(gulp.dest('dist/css'));
});

gulp-autoprefixer的八大选项：

1、browsers (array)：浏览器列表，你的项目所兼容的浏览器。你可以指定浏览器或浏览器集合（https://github.com/ai/browserslist#queries）。

参数详解:

参数	详解
last 2 versions	主流浏览器的最新两个版本
last 1 Chrome versions	谷歌浏览器的最新版本
last 2 Explorer versions	IE的最新两个版本
last 3 Safari versions	苹果浏览器最新三个版本
Firefox >= 20	火狐浏览器的版本大于或等于20
iOS 7	IOS7版本
Firefox ESR	最新ESR版本的火狐
> 5%	全球统计有超过5%的使用率

各浏览器的标识：

标识	对应的浏览器
Android	Android WebView.
BlackBerry or bb	Blackberry browser.
Chrome	Google Chrome.
Firefox or ff	Mozilla Firefox.
Explorer or ie	Internet Explorer.
iOS or ios_saf	for iOS Safari.
Opera	Opera.
Safari	desktop Safari.
OperaMobile or op_mob	Opera Mobile.
OperaMini or op_mini	Opera Mini.
ChromeAndroid or and_chr
FirefoxAndroid or and_ff	Firefox for Android.
ExplorerMobile or ie_mob	Internet Explorer Mobile.

2、cascade (boolean):如果css未压缩，是否美化属性值，默认值为：true
像这样：

      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);

3、add (boolean): 是否应该加前缀，默认值为：true

4、remove (boolean): 是否去掉不必要（过时）的前缀 默认值为：true

5、supports (boolean):是否为"@supports"属性添加前缀，默认值为：true

6、flexbox (boolean|string): 是否为flexbox属性是否为IE的添加前缀，默认值为：true。如果值为"no-2009"，那么只会为最终和IE规范添加前缀。

7、grid (boolean): 是否为Grid布局属性添加IE前缀，默认值为：true

8、stats (object):在我的浏览器查询统计中定制>10%的使用统计。