gulp autoprefixer doesn't add moz prefix

问题

I am using gulp with autoprefixer in my project, and I have to use backgrounds gradient like this:

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

but output is:

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

What wrong with me?

Part of 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 using gulp-autoprefixer

even if Iam setting

 browsers: ['Firefox 14']

output still:

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

回答1:

Use "autoprefixer-core" with "gulp-postcss". Usage example :

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")
  })
})

回答2:

If you check http://caniuse.com/#search=linear-gradient, you will see that Firefox since at least version 30 do not require the moz- prefix. Version version 30 has a global market share of < 1% and you have set '> 1%'

回答3:

There is a bug with gulp-autprefixer.No way to add "-moz-" prefix.

Autoprefixer standalone works well: http://jsfiddle.net/tsvppawk/

The same query "Firefox >= 2" in gulp-atuprefixer generates:

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

来源：https://stackoverflow.com/questions/26098011/gulp-autoprefixer-doesnt-add-moz-prefix

标签

mozilla

gulp

linear-gradients

autoprefixer