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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值