gulpプラグイン(9)-gulp-postcss&autoprefixer(CSSプレフィックス生成)

原文:https://www.jianshu.com/p/70dc50d71290

機能の説明

設定されたブラウザバージョンに基づいて、ブラウザプレフィックスが自動的に処理されます.彼女を使うと、ブラウザに対する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:主流ブラウザの最新2バージョン
●last 1 Chrome versions:Googleブラウザの最新バージョン
●last 2 Explorer versions:IEの最新2バージョン
●last 3 Safari versions:アップルブラウザの最新3バージョン
●Firefox>=20:フォックスブラウザのバージョンが20以上
●iOS 7:IOS 7バージョン
●Firefox ESR:最新ESRバージョンの火狐
●>5%:世界統計で5%を超える使用率