dayjournal memo

Total 974 articles!!

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

Yasunori Kirimoto's avatar

今回は、「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モジュールを利用することによりベンダープレフィックスの付与を自動で実行することができます。



book

Q&A