gulp教程之gulp-autoprefixer

简介：

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

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程

1.2、本示例目录结构如下：

2、本地安装gulp-autoprefixer

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

2.2、安装：命令提示符执行

cnpm install gulp-autoprefixer --save-dev

2.3、注意：没有安装cnpm请使用

npm install gulp-aotoprefixer --save-dev

。 什么是cnpm，如何安装？

2.4、说明：

--save-dev

保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json？

3、配置gulpfile.js

3.1、基本使用

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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')); });

3.2、gulp-autoprefixer的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%的使用率

3.3、发现上面规律了吗，相信这不难看出，接下来说说各浏览器的标识：

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile.

4、执行任务

4.1、命令提示符执行：gulp testAutoFx

5、结束语

5.1、本文有任何错误，或有任何疑问，欢迎留言说明。