gulp-autoprefixer not working - css

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']);
});

Answer 1

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.