gulp-autoprefixer

簡介：

使用gulp-autoprefixer根據設定浏覽器版本自動處理浏覽器字首。使用她我們可以很潇灑地寫代碼，不必考慮各浏覽器相容字首。【特别是開發移動端頁面時，就能充分展現它的優勢。例如相容性不太好的flex布局。】

1、安裝nodejs/全局安裝gulp/項目安裝gulp/建立package.json和gulpfile.js檔案

1.1、安裝，全局的gulp
    cnpm install --global gulp
1.2、作為項目的開發依賴（devDependencies）安裝
    cnpm install --save-dev gulp
           

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。 
2.4、說明：--save-dev 儲存配置資訊至 package.json 的 devDependencies 節點。
           

3、配置gulpfile.js

3.1、基本使用

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

gulp.task('default', 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 default