Gulp autoprefixer 无法与 gulp compass 一起使用

Question

我不确定哪里出了问题，但是自动前缀无法正常工作。

我的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

我的配置对象

"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

您没有正确使用 gulp-autoprefixer，您的配置对象是为 autoprefixer 正确编写的。

试试这个：

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

现在应该可以了

Answer 2

如果你看到这个例子gulp-autoprefixer

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

所以它需要一个对象。所以你应该传递给它的是：

 config.taks.css.autoprefixer

而不是autoprefixer('last 2 versions', 'safari 5', 'ie 9'....

Gulp autoprefixer 无法与 gulp compass 一起使用

Gulp autoprefixer not working with gulp compass

javascript

css

gulp

autoprefixer