Gulp Autoprefixer Not Working

Question

I'm unable to get Autoprefixer to work with Gulp. I'm using opacity in my CSS, gradients, and transforms and there aren't any vendor prefixes showing up. Otherwise, everything else is working.

Here's my gulp file:

var gulp = require('gulp');

var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint', function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts', function() {
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change', livereload.changed);
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('scss/**/*.scss', ['sass']);  
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

• I've searched and tried various solutions to this problem without avail. I've also tried changing .pipe(gulp.dest('')) to a specific directory (like this answer suggested), without any luck.

I appreciate any help you can offer.

* UPDATE *

I'd like to note my naivety on Autoprefixer adding a prefix for opacity, which it obviously does not.

Answer 1

This gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');

function onError(err) {
    console.log(err);
}

gulp.task('sass', function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

With this scss:

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

Produces this output:

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

So, I'm not sure what I'm doing different exactly except that I list my browsers differently. But I assume you've tried removing those etc.

Answer 2

This should work, putting the browsers in an array, instead of as arguments:

.pipe(autoprefixer({
    overrideBrowserlist: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

and you can add cascade by setting it true or false cascade: false

Answer 3

I know this question was asked a while back but I have stumbled upon a similar problem.

Here is how I resolved it:

1. Add browserlist entry to package.json:

{
"browserslist": [
    'last 2 versions', 
    'safari 5', 
    'ie6', 
    'ie7', 
    'ie 8',
    'ie 9', 
    'opera 12.1', 
    'ios 6', 
    'android 4'
  ]
}

2. Install autoprefixer

npm i --save-dev autoprefixer

3. Install postcss

npm i --save-dev postcss

4. Modify the pipe in gulpfile.js to be:

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(postcss([autoprefixer()]))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

Answer 4

This should work.

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

gulp.task('styles', function(){
    return gulp.src('css/styles.css')
   .pipe(autoprefixer('last 2 versions'))
   .pipe(gulp.dest ('build'));
});

gulp.task('watch', function(){
    gulp.watch('css/styles.css', gulp.series(['styles']));
});

Answer 5

The first thing that I see is:

.pipe(autoprefixer('last 2 versions'))

A small change in syntax there:

.pipe(autoprefixer('last 2 version'))

Beyond that, I have had success by piping the compiled sass to the destination and then running autoprefixer.

.pipe(sass())
.pipe(gulp.dest(''))
.pipe(autoprefixer())