2016-06-08 3 views
1

Я использую Gulp в своем проекте и хочу использовать autoprefixer.Gulp - AutoPrefixer не работает должным образом

Мой текущий файл глотком выглядит следующим образом:

// Include gulp 
var gulp = require('gulp'); 
// Include plugins 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 
var sass = require('gulp-ruby-sass'); 
var autoprefixer = require('gulp-autoprefixer'); 
var imagemin = require('gulp-imagemin'); 
var cache = require('gulp-cache'); 


// Concatenate & Minify JS 
gulp.task('scripts', function() { 
    return gulp.src('js/*.js') 
     .pipe(concat('main.js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('build/js')); 
}); 


gulp.task('sass', function() { 
    return sass('scss/style.scss', {style: 'compressed'}) 
    .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(gulp.dest('build/css')); 
}); 




gulp.task('images', function() { 
    return gulp.src('images/**/*') 
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('build/img')); 
}); 


gulp.task('watch', function() { 
    // Watch .js files 
    gulp.watch('js/*.js', ['scripts']); 
    // Watch .scss files 
    gulp.watch('scss/*.scss', ['sass']); 
    // Watch image files 
    gulp.watch('images/*', ['images']); 
}); 


// Default Task 
gulp.task('default', ['scripts', 'sass', 'images', 'watch']); 

Как вы можете видеть, у меня есть .sass задачу, которая работает, как ожидалось. Я добавил

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

перед тем, как его миниатюрировать в файл min.css. Теперь, когда я запускаю это, все кажется прекрасным. Но, к примеру, когда я сохранить этот код:

.test{ 
    transform: scale(.5); 
} 

Id ожидать иметь -webkit- версии и т.д. добавлены в мой файл min.css, но по какой-то причине он не делает. Кто-нибудь есть идея, где ошибка может быть?

+0

Он никогда не добавляет префикс -webkit? Возможно, некоторым правилам не нужен префикс для последних двух версий браузера ... – MMachinegun

+0

Он просто ничего не добавляет, кроме transform: scale (.5); –

+2

Средство autoprefixer использует базу данных с сайта caniuse.com. На caniuse говорит, что последние 2 версии браузера не поддерживают префикс «-webkit-». Если вам нужно поддерживать некоторые действительно старые префиксы, введите последние 40 версий или что-то в этом роде. Последние поддерживаемые версии: caniuse.com/#search=transform%3A%20scale – Phil

ответ

0

Попробуйте использовать это. Он отлично работает для меня.

.pipe(autoprefixer({ 
    browsers: ['last 2 version', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'] 
})) 
+0

Могу ли я попросить вас добавить еще какой-нибудь контекст вокруг вашего ответа. Кодовые ответы трудно понять. Это поможет читателю и будущим читателям, если вы сможете добавить дополнительную информацию в свой пост. – RBT

Смежные вопросы