Gulp autoprefixer not working with gulp compass

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

Yeah... Why? Isn't autoprefixer redundant when use with compass? — roydukkey, Nov 27 '15 at 16:08

Arnaud Gueras · Accepted Answer · 2015-11-27T04:12:54.607

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

edited Nov 27 '15 at 04:12

answered Nov 26 '15 at 21:00

Arnaud Gueras

2,014
11
14

Still seems not to work. `transform: translateY(-50%);` should be prefixed -yes? – Union find Nov 26 '15 at 21:04

score 0 · Answer 2 · answered Nov 27 '15 at 03:27

0

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'....

answered Nov 27 '15 at 03:27

harishr

17,807
9
78
125

I have tried this as well. It still isn't prefixing. – Union find Nov 27 '15 at 16:02
If one of the use case is not working does not mean that whole plugin is not working, have you checked it for other css properties?? – harishr Nov 28 '15 at 16:24

Gulp autoprefixer not working with gulp compass

2 Answers2