2014-09-29 31 views
5

Sto usando gulp con autoprefixer nel mio progetto, e devo utilizzare sfondi gradiente come questo:sorso autoprefixer non aggiungere il prefisso moz

background: linear-gradient(#e98a00, #f5aa2f); 

ma la produzione è:

background:-webkit-linear-gradient(#e98a00,#f5aa2f); 
background:linear-gradient(#e98a00,#f5aa2f); 

Cosa sbagliato con me?

Parte della Gulpfile.js

gulp.task('styles', function() { 
    return gulp.src(['css/less/mainPage.less']) 
    .pipe(plumber()) 
    // .pipe(concat('base.scss')) 
    .pipe(less()) 
    .pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions', 'Firefox 14', 'Opera 11.1'] }])) 
    .pipe(minifyCSS({keepBreaks: true})) 
    .pipe(gulp.dest('css')) 
    .pipe(connect.reload()); 
}); 

Iam utilizzando gulp-autoprefixer

anche se Iam impostazione

browsers: ['Firefox 14'] 

uscita ancora:

background:-webkit-linear-gradient(#e98a00,#f5aa2f); 
background:linear-gradient(#e98a00,#f5aa2f); 
+0

Si sta usando 'gulp-prefix' o' gulp-autoprefixer'? –

+0

gulp-autoprefixer – betmakh

risposta

8

Usa "autoprefixer-core" con "postcss gulp-". Esempio di utilizzo:

var MASK_SRC = "./src/mask/page0/"; 

var gulp = require("gulp") 
var plumber = require("gulp-plumber") 
var postcss = require('gulp-postcss'); 
var sourcemaps = require('gulp-sourcemaps'); 
var autoprefixer = require('autoprefixer-core'); 
var csso = require("gulp-csso") 

gulp.task("styles", function() { 
    return gulp.src(MASK_SRC + "scss/*.css") 
    //.pipe(plumber()) 
    .pipe(postcss([ autoprefixer({ browsers: ["> 0%"] }) ])) 
    //.pipe(csso()) 
    .pipe(gulp.dest(MASK_SRC + "/css/")) 
}) 

gulp.task("dev", ["styles"], function() { 
    gulp.watch(MASK_SRC + "scss/**/*", function(event) { 
    gulp.run("styles") 
    }) 
}) 
0

Se si seleziona http://caniuse.com/#search=linear-gradient, si vedrà che Firefox poiché almeno la versione 30 non richiede il prefisso moz-. La versione versione 30 ha una quota di mercato globale di < 1% e hai impostato '> 1%'

0

Niente di male, tutto sembra funzionare come previsto.

La cosa è Firefox non ha bisogno del prefisso -moz dal momento che la v16, e anche se è stata impostata Firefox 14, l'utilizzo del browser globale di questa versione riportata da Can I Use è 0.04% e hai precisato > 1% quindi non è aggiunto al tuo output.

Se davvero si vuole aggiungere il prefisso -moz per Firefox 14, è necessario rimuovere > 1% dalla lista browsers.

0

C'è un bug con gulp-autprefixer.Nessun modo per aggiungere il prefisso "-moz-".

Autoprefixer standalone funziona bene: http://jsfiddle.net/tsvppawk/

La stessa query "Firefox> = 2" in gulp-atuprefixer genera:

background: -webkit-linear-gradient(#e98a00, #f5aa2f); 
background: linear-gradient(#e98a00, #f5aa2f); 
Problemi correlati