gulp autoprefixer不添加moz前缀 [英] gulp autoprefixer doesn't add moz prefix

问题描述

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

  background：linear -gradient（＃e98a00，＃f5aa2f）; 
  

但输出为：

 背景：-webkit线性梯度（＃e98a00，＃f5aa2f）; 
背景：线性渐变（＃e98a00，＃f5aa2f）; 
  

我有什么不对？

Gulpfile.js的一部分

  gulp.task（'styles'，function（）{
返回gulp.src（['css / less / mainPage.less']）
 .pipe（plumber（））
 // .pipe（concat（'base.scss'））
.pipe（less（））
 .pipe（前缀（[{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的Iam

即使Iam设置

 浏览器：['Firefox 14'] 
  
 
 
 
 $ b $ p $ 背景： -webkit线性梯度（＃e98a00，＃f5aa2f）; 
背景：线性渐变（＃e98a00，＃f5aa2f）; 
  




解决方案

使用autoprefixer-core和gulp-postcss 。用法示例：



  var MASK_SRC =./src/mask/page0/; 
 $ b 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（[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）
 }）
}）
  




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

解决方案

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

这篇关于gulp autoprefixer不添加moz前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！