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

功能描述

根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑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%的使用率