Gulp Autoprefixer Not Working

Question

I cannot get Autoprefixer to work with Gulp. I use opacity in my CSS, gradients and transforms, and no provider prefixes appear. Otherwise, everything else works.

Here is 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 searched and tried various solutions to this problem to no avail. I also tried changing .pipe(gulp.dest('')) to a specific directory (e.g. this answer suggested ), with no luck.

I appreciate any help you can offer.

* UPDATE *

I would like to point out my naivety in Autoprefixer, adding a prefix for opacity, which obviously isn't.

Answer 1

This gulpfile file:

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

Using this scss:

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

Produces this conclusion:

 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 am doing different, except that I have listed my browsers differently. But I assume that you tried to delete them, etc.

Answer 2

This should work by putting browsers in an array, and not as arguments:

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

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

Answer 3

That 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 4

I know this question was asked some time ago, but I came across a similar problem.

Here's how I solved it:

1. Add browserlist entry in 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. Change the channel in gulpfile.js so that it is:

 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 5

I have a similar problem with gulp-autoprefixer (latest version) does not work.

This is the function in my gulpfile:

 function css() { return src('src/scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(sass({ outputStyle: 'compressed' }) .on('error', sass.logError)) .pipe(prefix()) .pipe(sourcemaps.write('maps')) .pipe(rename({ suffix: '.min' })) .pipe(dest(paths.assets + 'css')); } 

gulp-autoprefixer 7.0.1 did not work, but if I downgraded it to 3.1.1, I got browser prefixes in my output. Any insight into why this might happen is greatly appreciated.

Answer 6

The first thing I see is:

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

A slight syntax change:

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

Also, I had success by linking the compiled sass to the destination, and then running autoprefixer.

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