gulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する

　今回はgulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する話です。サンプルは https://github.com/shibayu36/javascript-playground/tree/master/try-autoprefixer においてあります。

解決したい課題

• サポート状況を見ながらちまちまCSSのベンダープレフィックスを付けるのは面倒
• 面倒なだけならいいが、つけ忘れによるバグも発生する可能性がある

　こういう課題は自動化で解決したい。

解決策

• autoprefixerというツールを使えばベンダープレフィックスを自動で付けたCSSを作成できる
• gulpとautoprefixerを連携させるにはgulp-autoprefixerを使う
• これらを利用して、自分がサポートしたいブラウザを指定し、必要なベンダープレフィックスを自動で付けるようにする

gulp-autoprefixerによる自動化

　以下の手順で導入できる。

• 必要なモジュールのインストール
• gulpのtaskを書く
• CSSを書いてコンパイルする

必要なモジュールのインストール

$ npm install -D gulp
$ npm install -D gulp-autoprefixer

gulpのtaskを書く

　今回はsrc/css/以下のCSSファイルに自動でベンダープレフィックスを付けて、static/css/以下に配置するというタスクを書いてみる。

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

gulp.task('compile-css', function () {
    return gulp.src(['src/css/*.css'])
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        }))
        .pipe(gulp.dest('static/css'));
});

　やっていることは以下のとおり。

• gulp.srcで元となるファイルをsrc/css/*.cssに指定
• gulp-autoprefixerに通し、自動でベンダープレフィックスを付ける
  • browsersのオプションで自分のサポートしたいブラウザを指定。今回はメインブラウザの最新2バージョン、iOS 8.1以上、Android Browser 4.4以上という指定を行った
  • cascade falseにして、変に整形されないようにしておく
• gulp.destを使って結果をstatic/css/以下に出力

　browsersの指定方法だけ少し複雑で、いろんな指定方法が出来る。メインブラウザnバージョンとか、利用割合n%以上のブラウザとか、バージョンn以上のFirefoxとかの指定が可能。他にも自分のGoogle Analyticsをエクスポートして、自分のサービスの利用しているもので1%以上を占めるブラウザを全て対象にするなどといったことも出来る。詳しくは以下のドキュメントを参照。

• https://github.com/postcss/autoprefixer#browsers
• https://github.com/ai/browserslist#queries

CSSを書いてコンパイルする

　実際にCSSを書いてコンパイルしてみる。

src/css/app.css

:fullscreen a {
    display: flex
}

　以下のコマンドを実行する。

$(npm bin)/gulp compile-css

　static/css/app.cssに以下のようなCSSが生成された。あとはこ本番ではこれを配信すれば良いだけになった。

:-webkit-full-screen a {
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

lessなどと併用する

　lessなどを利用していても簡単に導入できる。今回のautoprefixerはPostCSS という仕組みに乗っかっていて、単にCSSを入力として何らかのCSSの出力を返す形式になっているだけなので、lessコンパイル後のCSSに対して適用すれば良い。

　gulp-lessをインストールする。

npm install -D gulp-less

　タスクはこういう感じ。

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

gulp.task('compile-css-with-less', function () {
    return gulp.src(['src/less/*.less'])
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        }))
        .pipe(gulp.dest('static/css'));
});

　以下のようにlessを書く。
src/less/app.less

:fullscreen {
    a {
        display: flex
    }
}

　コンパイルする。

$(npm bin)/gulp compile-css-with-less

　static/css/app.cssに結果が出力される。

まとめ

　gulp-autoprefixerを使ってベンダープレフィックス付与の自動化を行ってみた。こういうのをほうっておくとデザイナ負担がどんどん上がっていくので、どんどん自動化していきたい。

参考

• https://github.com/shibayu36/javascript-playground/tree/master/try-autoprefixer
• https://github.com/postcss/autoprefixer
• https://github.com/ai/browserslist