Gulp autoprefixer 不适用于 gulp 指南针

Question

I'm not sure where I'm going wrong here, but autoprefixer isn't working.

My Gulp:

var config       = require('../config')
if(!config.tasks.css) return

var gulp         = require('gulp')
var browserSync  = require('browser-sync')
var sourcemaps   = require('gulp-sourcemaps')
var handleErrors = require('../lib/handleErrors')
var autoprefixer = require('gulp-autoprefixer')
var path         = require('path')
var compass      = require('gulp-compass')

var paths = {
  src: path.join(config.root.src, config.tasks.css.src),
  dest: path.join(config.root.dest, config.tasks.css.dest)
}

var cssTask = function () {
  return gulp.src(paths.src)
    .pipe(sourcemaps.init())
    .pipe(compass(config.tasks.css.sass))
    .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.dest))
    .pipe(browserSync.stream())
}

gulp.task('css', cssTask)
module.exports = cssTask

My config object

"css": {
  "src": "stylesheets/scss",
  "dest": "stylesheets",
  "sass": {
    "config_file": "./src/stylesheets/config.rb",
    "css": "./public/stylesheets",
    "sass": "./src/stylesheets/scss",
     "logging"  : "false",
    "comments" : "false"
  },
  "autoprefixer": {
    "browsers": ["last 2 version", "safari 6", "ie 9", "ff 30", "ios 6", "android 4.2"]
  },
  "extensions": ["scss", "sass","css"]
}

Answer 1

You don't use gulp-autoprefixer correctly, your config object is correctly written for autoprefixer.

Try this :

.pipe(autoprefixer(config.tasks.css.autoprefixer))

It should work now

Answer 2

if you see the example gulp-autoprefixer

 .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))

so it needs an object. So what you should pass to it is :

 config.taks.css.autoprefixer

and not autoprefixer('last 2 versions', 'safari 5', 'ie 9'....