Search code examples
csssassgulpautoprefixer

Gulp Autoprefixer Not Working


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.


Solution

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