Gulp Autoprefixer Not Working

Gulp Autoprefixer Not Working

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.

Problem with gulp-autoprefixer using gulp

The version of gulp-autoprefixer that you're using requires at least Node 8. You're running Node 6, which doesn't recognize or support some of the newer Javascript syntax. You can downgrade gulp-autoprefixer to 6.10.0 or, if possible, upgrade to Node >=8.

Gulp autoprefixer is not prefixing

It does!

input::placeholder { color: red; }

results in

input::-moz-placeholder {
        color: red;
}
input:-ms-input-placeholder {
        color: red;
}
input::-ms-input-placeholder {
        color: red;
}
input::placeholder {
        color: red;
}

You've probably used css rules that don't need prefixes with your current configuration. Check browserslist for custom prefixing rules

gulp-autoprefixer not outputting -webkit-flex no matter the options

Solved this by adding a browserslist config file.

EDIT: At the time that I initially solved this, using the browserslist config suggested in the link above solved my problem. That suggested config is shown below.

What worked before

In package.json

"browserslist": [
  "> 1%",
  "last 2 versions"
]

Or as a standalone .browserslist or .browserslistrc file.

> 1% 
Last 2 versions

However, since then the browsers that require -webkit-flex, must have dropped below the 1% mark as .foo { display: flex; } now compiles to the following:

.foo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

What works now

If I change the > 1% in my browserslist to > 0.1% I will now get:

.foo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

This answer will eventually cease to work itself should browsers that require -webkit-flex ever drop below 0.1% of usage.

What will work for you

If you have a specific browser you wish to target to get -webkit-flex it would probably be more efficient to add that browser to your browserslist.

gulp sass sourcemaps and autoprefixer not working

I was able to achieve the sourcemaps and autoprefix functionality so thought of sharing. Here is my gulpfile.js :

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('default', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

---

Related Topics