Gulp Autoprefixer Çalışmıyor

Question

Autoprefixer'ın Gulp ile çalışmasını sağlayamıyorum. CSS, gradyanlar ve dönüşümlerimde opaklık kullanıyorum ve herhangi bir satıcı öneki görünmüyor. Aksi halde, her şey çalışıyor. Aranan ve boşuna olmadan bu soruna çeşitli çözümler denedim

var gulp = require('gulp'); 

var lr = require('tiny-lr'); 
var jshint = require('gulp-jshint'); 
var sass = require('gulp-sass'); 
var autoprefixer = require('gulp-autoprefixer'); 
var minifycss = require('gulp-minify-css'); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 
var livereload = require('gulp-livereload'); 
var server = lr(); 
var plumber = require('gulp-plumber'); 

var onError = function (err) { 
    gutil.beep(); 
    console.log(err); 
}; 

gulp.task('lint', function() { 
    return gulp.src('js/all.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('default')); 
}); 

gulp.task('sass', function() { 
    return gulp.src('scss/*.scss') 
     .pipe(sass({errLogToConsole: true})) 
     .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
     .pipe(minifycss()) 
     .pipe(gulp.dest('')) 
     .pipe(plumber({ 
      errorHandler: onError 
     })) 
     .pipe(livereload(server)); 
}); 


gulp.task('scripts', function() { 
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js']) 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('js/min')) 
     .pipe(rename('main.min.js')) 
     .pipe(gulp.dest('js/min')) 
     .pipe(plumber({ 
      errorHandler: onError 
     })) 
     .pipe(livereload(server)); 
}); 

gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch('**/*.php').on('change', livereload.changed); 
    gulp.watch('js/*.js', ['scripts']); 
    gulp.watch('scss/**/*.scss', ['sass']); 
}); 

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']); 

• :

  İşte benim yudum dosya. Ayrıca herhangi bir şans olmadan .pipe(gulp.dest(''))'u belirli bir dizine (this answer suggested gibi) değiştirmeyi denedim.

Sunduğunuz herhangi bir yardımı takdir ediyorum.

* GÜNCELLEME *

Ben Autoprefixer açıkça değil opaklık için bir önek ekleme benim basitliği not etmek istiyorum.

Answer 1

Bu gulpfile:

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var prefix = require('gulp-autoprefixer'); 
var minify = require('gulp-minify-css'); 
var plumber = require('gulp-plumber'); 

function onError(err) { 
    console.log(err); 
} 

gulp.task('sass', function(){ 
    return gulp.src('src/style.scss') 
     .pipe(sass()) 
     .pipe(prefix('last 2 versions')) 
     .pipe(minify()) 
     .pipe(gulp.dest('css/')) 
     .pipe(plumber({ 
      errorHandler: onError 
     })) 
}); 

bu SCSS olarak:

body { 
    opacity: .5; 
    box-sizing: border-box; 
    transform: scale(.5); 
    display: flex; 
} 

bu çıktıyı üretir: Yani

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex} 

, ben değilim emin değilim tarayıcılarımı listelemem dışında tam olarak farklı farklı. Ama sanırım bunları kaldırmayı denediniz.

Answer 2

Bu yerine argümanlar olarak bir, bir dizideki tarayıcıları koyarak çalışması gerekir:

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

ve cascade: false

Answer 3

ilk şey doğru veya yanlış ayarlayarak çağlayan ekleyebilmeniz ben bkz geçerli:

: orada sözdiziminde

.pipe(autoprefixer('last 2 versions')) 

küçük bir değişiklik

.pipe(autoprefixer('last 2 version')) 

Bunun ötesinde, derlenmiş sass'ı hedefe yönlendirerek ve ardından otomatik düzeltme eki çalıştırarak başarı elde ettim.

.pipe(sass()) 
.pipe(gulp.dest('')) 
.pipe(autoprefixer())