gulpgulp-sassgulp-autoprefixer

gulp autoprefixer giving me a promise error


I tried this solution from Gulp Autoprefixer Not Working but it's not working out for me.

The code that I used is:

"use strict";

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({browsers:['last 2 versions']}))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

I'm getting this error message:

/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
    at LazyResult.async (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
    at DestroyableTransform._transform (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/index.js:28:13)
    at DestroyableTransform.Transform._read (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)
    at writeOrBuffer (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:312:5)
    at DestroyableTransform.Writable.write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:239:11)
    at write (/Users/krisvandermast/gulptests/area512/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/krisvandermast/gulptests/area512/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

Solution

  • I had opened an error on GitHub for it: https://github.com/sindresorhus/gulp-autoprefixer/issues/45.

    Turned out to be that I needed to upgrade my Node.js version to 4. It's now 4.1.0 and the following code worked:

    package.json

    {
      "name": "a",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Kris van der Mast",
      "license": "ISC",
      "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-autoprefixer":"^3.0.1"
      }
    }
    

    gulpfile.js

    "use strict";
    
    var gulp = require('gulp'),
        autoprefixer = require('gulp-autoprefixer');
    
    gulp.task('default', function () {
        return gulp.src('src/app.css')
            .pipe(autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            }))
            .pipe(gulp.dest('dist'));
    });
    

    app.css

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

    Run gulp at this moment and get the following output:

    app.css after prefixing

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