gulp #007 – gulpでCSSファイルにベンダープレフィックスを付与

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

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

npm install --save-dev gulp-autoprefixer

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

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

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/'))

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

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

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

• 参考文献
  gulp gulp-autoprefixer Gulp.js入門