Search code examples
javascriptcssgulpautoprefixer

Gulp autoprefixer not working with gulp compass


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

Solution

  • 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