原文：http://www.ydcss.com/archives/94
簡介：
使用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-autoprefixer --save-dev。 什么是cnpm，如何安裝？
2.4、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。為什么要保存至package.json？
3、配置gulpfile.js
3.1、基本使用
|
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