gulp-autoprefixer not working

Question

I just can't get gulp-autoprefixer to work. I was testing it with transitions but when I save my scss file the prefixes don't show up in my css file. Everything else seems to be just fine.

This is my gulp file:

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('build/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('images/'));
});

gulp.task('styles', function(){
  gulp.src(['scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}))
});


gulp.task('default', ['browser-sync'], function(){
  gulp.watch("scss/**/*.scss", ['styles']);
  gulp.watch("*.html", ['bs-reload']);
});

Thank you all for your help!!

UPDATE

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('build/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('images/'));
});

gulp.task('styles', function(){
  gulp.src(['scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}))
});


gulp.task('default', ['browser-sync'], function(){
  gulp.watch("scss/**/*.scss", ['styles']);
  gulp.watch("*.html", ['bs-reload']);
});

score 5 · Answer 1 · answered Apr 18 '17 at 16:03

5

According to the documentation, the implementation is slightly different to what you have:

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', () =>
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

It now specifically passes an object containing browsers as an array.

This might be dependent upon the version you're using, because I have Gulpfiles that use an older syntax that looks more like yours.

answered Apr 18 '17 at 16:03

Toby

12,743
8
43
75

Thanks. I was trying to implement it on my example but it just doesn't want to work. – Nesta Apr 18 '17 at 16:33
Does your autoprefixer pipe match what is shown in my answer? You can try installing and adding [gulp-debug](https://www.npmjs.com/package/gulp-debug), it will let you log out what is happening inside tasks. – Toby Apr 18 '17 at 17:26
Because I have more stuff going on in that same function I got a bit unsure where to put that new code. I now have this in that function: gulp.task('styles', function(){ gulp.src(['scss/**/*.scss']) .pipe(plumber({ errorHandler: function (error) { console.log(error.message); this.emit('end'); }})) .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('css/')) .pipe(browserSync.reload({stream:true})) }); – Nesta Apr 18 '17 at 17:57
Can you update the question, with a note about what changed? The code is completely unreadable in that comment. – Toby Apr 18 '17 at 18:02
I'm sorry, I don't see any other issues with how this is setup. How certain are you that prefixes that you should be seeing are not there? **Update**: Maybe try this: http://stackoverflow.com/a/29118622/4008056 – Toby Apr 18 '17 at 19:06

gulp-autoprefixer not working

1 Answers1