今回は、「gulp」でCSSファイルにベンダープレフィックスを付与する方法を試したいと思います。


node.js_016_02


作業フォルダでnpmでgulp-autoprefixerをローカルインストールします。


npm install --save-dev gulp-autoprefixer


node.js_022_01


gulpfile.js


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

gulp.task('css', function() {
gulp.src('./sample/stylesheet.css')
.pipe(autoprefixer({
//5%以上使われているブラウザに対応
browsers: ['> 5%']}))
.pipe(gulp.dest('./dist/'));
console.log('ベンダープレフィックスを付与しました。');
});

gulp.task('default', ['css'])


作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。


gulp


node.js_022_02


処理が完了すると、distフォルダにベンダープレフィックスが付与された「stylesheet.css」が作成されます。

node.js_022_03


stylesheet.css


#sample {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#scale {
-webkit-transform: scale(4.0);
transform: scale(4.0);
}


元のstylesheet.css


#sample {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#scale {
transform: scale(4.0);
}




ベンダープレフィックスのモジュール読込み:


var autoprefixer = require('gulp-autoprefixer')


ベンダープレフィックスを付与してdistフォルダに保存:


gulp.src('./sample/stylesheet.css')
.pipe(autoprefixer({
//5%以上使われているブラウザに対応
browsers: ['> 5%']}))
.pipe(gulp.dest('./dist/'))


各ブラウザのバージョンが2つ前までのベンダープレフィックスを付与:
※オプションを設定することによって様々なバージョンのベンダープレフィックスの付与が可能


.pipe(autoprefixer({
browsers: ['last 2 versions']}))


gulp-autoprefixerモジュールを利用することによりベンダープレフィックスの付与を自動で実行することができます。







Q&A