前回の記事では、Macによるgulpの開発環境の構築について書きました。
記事の中で、gulpで実行させるタスクの例としてSCSSをコンパイルしてCSSにする方法を説明しましたが、今回はもう一歩だけ進んで、SCSSをコンパイルして出力されたCSSにさらに自動でベンダープレフィックスを付与してみたいと思います。
gulp-autoprefixerをインストール
CSSのコーディングをしていて、面倒に感じるのは、やはりベンダープレフィックスの付与です。
flexboxやtransformを使用するのであれば、ベンダープレフィックスは必要ですし、書いたコードにベンダープレフィックスをつける必要があるかをCan I Useで調べて、毎回記述するのは面倒です。更につけ忘れによるバグも心配です。
ただ、gulp-autoprefixerを使用すれば、そんな面倒な作業から解放されます。
gulp-autoprefixerは、CSSコードを解釈し、必要なベンダープレフィックスを自動で付与してくれるので、非常に便利です。
さっそく導入してみましょう。
まず、プロジェクトディレクトリを作成し、gulpを使用する環境を準備します。
$ mkdir webproject && cd $_ $ npm init --yes $ npm i -D gulp
環境を準備しましたら、gulp-autoprefixerプラグインをインストールします。
$ npm i -D gulp-autoprefixer
コンパイルするSCSSファイルを用意
つぎにgulpでコンパイルするSCSSファイルを用意します。 プロジェクトディレクトリであるwebprojectの配下に下記のような階層を作成します。
webproject
└── src
└── sass
└── style.scss
$ mkdir src && cd $_ $ mkdir sass && cd $_
次にsassディレクトリ内にscssファイルを作成します。
$ vi style.scss
今回は、flexboxを試してみましょう。
.header {
display: flex;
ul{
display: flex;
}
}
gulpfile.jsを作成
プロジェクトディレクトリ(webproject)に戻り、gulpで実行させるタスクを「gulpfile.js」に記述していきましょう。
$ vi gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var options = {
browsers: ['last 3 version', 'ie >= 6', 'Android 4.0'],
cascade: false
};
gulp.task('sass', function() {
gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(autoprefixer(options))
.pipe(gulp.dest('css/'))
});
gulpfile.jsのコードについては前回記事を参考していただきたいのですが、autoprefixerの部分については少し解説したいと思います。
autoprefixerのオプションについてですが、まず、browsersオプションで対応するブラウザのバージョンを指定します。
上記の例だとieは9以上、Androidは4以上、それ以外は最新3バージョンで必要なベンダープレフィックスが付与されます。
次にcascadeオプションですが、デフォルトはtrueになっているのですが、これをfalseにするとCSSが変に整形されないようになりますので、設定しておきましょう。（あとで確認するときに便利です）
では、gulpを実行してみます。
$ gulp sass
下記のようにCSSにベンダープレフィックスが自動に付与されたものが出力されていると思います。
.header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.header ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
本日は以上です。