gulp 插件之 gulp-autoprefixer

gulp-autoprefixer 的簡介：

            gulp-autoprefixer 插件用來自動給 css 文件樣式添加瀏覽器前綴。

一、gulp-autoprefixer 插件的使用

1、安裝 “gulp-autoprefixer”插件命令（在終端進入到項目根目錄執行）

            npm install --save-dev  gulp-load-plugins gulp-autoprefixer

2、在項目根目錄下提供 "gulp-autoprefixer" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-autoprefixer"

 具體示例：
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();            // 裝載插件
      
gulp.task('autoprefixer', function () {                        // 自定義 "autoprefixer" 任務
    return gulp.src('src/css/*.css')                               // 模糊匹配 src/css 目錄下所有 css 文件
        .pipe(plugins.autoprefixer({                              // 調用 gulp-autoprefixer 插件
                        browsers: ['last 2 versions','Android >= 5.0'],      // 定義瀏覽器參數
                        cascade: true,                                    // 是否添加瀏覽器前綴，默認：true
                        remove: true                                     // 是否移除不必要的瀏覽器前綴，默認：true
        }))
        .pipe(gulp.dest('dist/css'));                               // 目標文件存放路徑
});

// gulp-autoprefixer 插件的 browsers 參數值詳解
        last 2 versions: 主流瀏覽器的最新兩個版本
        last 1 Chrome versions: 谷歌瀏覽器的最新版本
        last 2 Explorer versions: IE 的最新兩個版本
        last 3 Safari versions: 蘋果瀏覽器最新三個版本
        Firefox >= 20: 火狐瀏覽器的版本大于或等于20
        Firefox ESR: 最新ESR版本的火狐
        > 5%: 全球統計有超過 5% 使用率的瀏覽器
// 前面為瀏覽器縮寫，后面是瀏覽器全稱   
        Android for Android WebView.
        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.
        BlackBerry or bb for Blackberry browser.
        FirefoxAndroid or and_ff for Firefox for Android.
        ExplorerMobile or ie_mob for Internet Explorer Mobile.

4、最后在終端運行 "gulp autoprefixer" 命令

PS：如果沒有錯誤提示信息，證明就沒什么問題了。現在去項目根目錄下看是否已經生成了 "dist/css" 目錄和目標文件。未完待續。。。