今回はgulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する話です。サンプルは https://github.com/shibayu36/javascript-playground/tree/master/try-autoprefixer においてあります。
解決策
- autoprefixerというツールを使えばベンダープレフィックスを自動で付けたCSSを作成できる
- gulpとautoprefixerを連携させるにはgulp-autoprefixerを使う
- これらを利用して、自分がサポートしたいブラウザを指定し、必要なベンダープレフィックスを自動で付けるようにする
gulp-autoprefixerによる自動化
以下の手順で導入できる。
必要なモジュールのインストール
$ 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に通し、自動でベンダープレフィックスを付ける
- gulp.destを使って結果をstatic/css/以下に出力
browsersの指定方法だけ少し複雑で、いろんな指定方法が出来る。メインブラウザnバージョンとか、利用割合n%以上のブラウザとか、バージョンn以上のFirefoxとかの指定が可能。他にも自分のGoogle Analyticsをエクスポートして、自分のサービスの利用しているもので1%以上を占めるブラウザを全て対象にするなどといったことも出来る。詳しくは以下のドキュメントを参照。
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
まとめ
gulp-autoprefixerを使ってベンダープレフィックス付与の自動化を行ってみた。こういうのをほうっておくとデザイナ負担がどんどん上がっていくので、どんどん自動化していきたい。
