gulp插件(9) - gulp-postcss & autoprefixer(生成CSS前缀)

原文来自:https://www.jianshu.com/p/70dc50d71290

功能描述

根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑CSS针对浏览器的兼容性问题。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】

例如：

.flex {display:flex}

编译后

.flex{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex
}

插件安装

$ cnpm install gulp-postcss --save-dev
$ cnpm install autoprefixer --save-dev

使用方法

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

gulp.task('autoprefixer', function(cb) {
    pump([
        gulp.src('src/css/index.css'),
        postcss([ autoprefixer({
            // 兼容主流浏览器的最新两个版本
            browsers: ['last 2 versions'],
            // 是否美化属性值
            cascade: true
        }) ])
        gulp.dest('dist/css')
    ], cb)
});

browsers参数简介，其它参数请参考

● 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%的使用率