gulp autoprefixer 不添加 moz 前缀答案

【问题标题】：gulp autoprefixer doesn't add moz prefixgulp autoprefixer 不添加 moz 前缀
【发布时间】：2014-09-29 10:43:12
【问题描述】：

我在我的项目中使用带有 autoprefixer 的 gulp，我必须像这样使用背景渐变：

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

但输出是：

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

我怎么了？

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());
});

我正在使用 gulp-autoprefixer

即使我在设置

 browsers: ['Firefox 14']

输出静止：

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

【问题讨论】：

你使用的是gulp-prefix还是gulp-autoprefixer？

标签： mozilla gulp linear-gradients autoprefixer

【解决方案1】：

将“autoprefixer-core”与“gulp-postcss”一起使用。使用示例：

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】：

如果您检查http://caniuse.com/#search=linear-gradient，您将看到至少从版本 30 开始的 Firefox 不需要 moz- 前缀。版本 30 全球市场占有率 '> 1%'

【讨论】：

【解决方案3】：

gulp-autprefixer 有一个错误。无法添加“-moz-”前缀。

Autoprefixer 独立运行良好：http://jsfiddle.net/tsvppawk/

gulp-atuprefixer 中的相同查询“Firefox >= 2”生成：

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

【讨论】：