gulp-autoprefixerを詳しく見てみる

/

gulp-autoprefixer

ベンダープレフィックスへの対応はCSSのコーティングで面倒な作業の一つですが、gulp-autoprefixerを使うとgulpのタスクでCSSファイルに自動的にベンダープレフィックスを書き込む事が出来ます。
gulp-pleeeaseがラップしているライブラリなので以前に少し触れましたが、特によく使うライブラリなので詳しく調べてみました。

gulp-pleeeaseでCSSにautoprefixerとMinifyを実行する/kotatt

インストール

$ npm install --save-dev gulp-autoprefixer

Gulpfile

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

gulp.task('autoprefixer', function(){
    gulp.src('src/style.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
});

タスクの実行

タスクを実行すると読み込んだCSSファイルにベンダープレフィックスを書き加えてくれます。

$ gulp autoprefixer
.sample {
  user-select: none;
  transition: all .5s;
  display: flex;
  background: linear-gradient(to bottom, white, black);
  box-sizing: border-box;
}
.sample {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all .5s;
  display: -ms-flexbox;
  display: flex;
  background: linear-gradient(to bottom, white, black);
  box-sizing: border-box;
}

Interactice DEMO

autoprefixerの挙動をオンライン上で対話形式で試せるので、ちょっとしたコードならgulpで実行させなくても確認する事が出来ます。
Autoprefixer CSS online

Options

オプションを指定すると対応ブラウザの設定や出力後のCSSファイルのインデントなどが設定出来ます。

browsers (array)

autoprefixerで対応させるブラウザを指定します。
ブラウザのアップデートによってパラメーターに対応した場合ベンダープレフィックスは不要になりますが、ある程度古いバージョンのブラウザをカバーしたかったり、限られた企業やユーザー向けのアプリケーションで特定のブラウザの古いバージョンに対応する必要がある場合などにbrowsersオプションで設定します。

パラメーターの例

ie Internet Explorerに対応
chorme Google Chormeに対応
last 2 versions メジャーブラウザの最新の2バージョンに対応
last 2 Chrome versions Google Chormeの最新2バージョンに対応
> 5% シェア5%以上のブラウザに対応
Firefox >= 20 バージョン20以上のFireFoxに対応
not ie <= 8 バージョン8以前のInternet Explorerを対象から外す。

リスト形式で複数の対象を指定出来ます。

browsers: ['last 2 versions',' >= 2%','Firefox >= 20' ]

より詳しい設定はbrowserlist/Githubで確認出来ます。
またbrowserl.istを利用すると指定したパラメーターが実際にどのブラウザに対応しているかを検索する事が出来ます。

Cascade (boolean)

default: true
出力するCSSを値でそろえて表記してくれます。

.sample {
  user-select: none;
}
/* true */
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

/* false */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

add (boolean)

default: true
CSSにプレフィックスを付け加えるか否を設定します。
falseにするとautoprefixerがプレフィックスを書き込んでくれなくなるで、タスク自体が事実上スクリプトとして機能しなくなります。

remove (boolean)

default: true
remove outdatedの略。
trueにすると既に古くなったプレフィックスを無視してくれます。

supports (boolean)

default: true
@supportsパラメーターに対応してくれます。

flexbox (boolean|string)

default: true
このオプションに関しては詳しい事がわからないのですが。どうやらflexboxは過去に仕様が大きく変更されたため、古い仕様は無視して最終的な仕様と特定のIEのみに対応したプレフィックスを追加してくれるようです。

grid

default: true
Internet ExplorerにGridプロパティ用をプレフィックスの対応してくれます。

stats (object)

このオプションも僕は使ったことがないので詳細は不明ですがbrowser listのcustome usageの値を指定する際に利用するようです。

オプションを指定してタスクの実行

gulpfile

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

gulp.task('autoprefixer', function (){
  gulp.src('src/style.css')
  .pipe(autoprefixer({
    browsers: ['last 5 versions','> 3%'],
    cascade: false,
    add: true,
    remove: true,
    supports: true,
    flexbox: true
  }))
  .pipe(gulp.dest('./dest/css'));
});

タスクの実行

$ gulp autoprefixer
.sample {
  user-select: none;
  transition: all .5s;
  display: flex;
  background: linear-gradient(to bottom, white, black);
  box-sizing: border-box;
}
.sample {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .5s;
  transition: all .5s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
  box-sizing: border-box;
}

他人の書いたコードを見ても解らないことが多かったのでオプションを一通り確認してみましたが、重要なのはブラウザの設定でcascadeは好みで決めて、あとは古いコードに対応しなければならない時に設定を見直すという感じで大体いけそうです。
一応オプションを網羅して設定したタスクを書いてみましたが、ほぼデフォルトと同じ値を明示し直しただけなので結果もあまり代わり映えしませんでした。

あとがき

autoprefixerはオプションが結構複雑なイメージがあったのですが、細かい設定が必要なのは古いコードに対応しなければならない時ぐらいのようです。それでもプレフィックスの対応自体が面倒ですが、便利なツールが出てきたり古いIEのサポートが終了したりで一昔前よりはよっぽど楽にはなっているんでしょうね。

参照

gulp-autoprefixer/Github
autoprefixer/Github