Блог о веб-разработке > Gulp > Gulp autoprefixer

Gulp autoprefixer

Любой программист, который использует CSS3 сталкивался с префиксами: -webkit, -ms, -o, -moz. Эти префиксы обеспечивают поддержку браузерами CSS3 свойств. Когда вы пишите эти префиксы руками, то легко можете забыть установить какой либо из них. Вы конечно можете воспользоваться caniuse.com, чтобы найти нужные префиксы, но эту рутинную работу можно (и нужно) автоматизировать.
Для системы сборки Gulp существует плагин gulp-autoprefixer, который использует базу caniuse.com для определения какие префиксы нужно использовать. Autoprefixer сканирует ваши CSS файлы, и автоматически проставляет префиксы к css свойствам.

Установка gulp autoprefixer

Gulp autoprefixer на Github.
Для установки откройте командную строку и введите:

npm install --save-dev gulp-autoprefixer

1	npm install --save-dev gulp-autoprefixer

Пример кода в Gulpfile.js:

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

gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'));
});