我在我的项目中使用gulp和autoprefixer,我必须使用像这样的背景渐变：
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
即使Iam设置
browsers: ['Firefox 14']
输出仍然是：
background:-webkit-linear-gradient(#e98a00,#f5aa2f); background:linear-gradient(#e98a00,#f5aa2f);
解决方法
将“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")
})
})