Trying to integrate gulp SASS with gulp Autoprefixer-postcss, failing miserably

Question

So, Autoprefixer has been bugging me to use the updated postcss version so I am trying to update my Gulp file.

The problem is all the examples do not integrate Sass as the first step; I use gulp-ruby-sass.

If I run my sass task on my sass directory (there are 2 scss files I need to process in there), this works and outputs 2 css files in the dest directory:

  gulp.task('sass', function() {
  return sass('./app/assets/sass')
  .on('error', function(err) {
    console.error('Error!', err.message);
  })
  .pipe(gulp.dest('./app/assets/css'))
  .pipe(reload({
    stream: true
  }));
});

But my question is how to integrate the next part, to pass the CSS through autoprefixer and generate sourcemaps? If I run this next in a sequence, this blows up with object is not a function errors:

  gulp.task('autoprefixer', function() {
  return gulp.src('./app/assets/css/')
  .pipe(sourcemaps.init())
  .pipe(postcss([autoprefixer({
    browsers: ['last 2 versions']
  })]))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./app/assets/css'));
});

I was trying to run them as a sequence, but would rather integrate them:

gulp.task('styles', function() {
  runSequence('sass', 'autoprefixer');
});

I just cannot put together the pipe that gets ruby-sass, autoprefixer, and sourcemaps to all work together.

UPDATE:

OK, even if I decide to keep the task separated (as suggested below by @patrick-kostjens), when I run the Autoprefixer task I get this error:

    [08:56:38] Starting 'autoprefixer'...

events.js:72
    throw er; // Unhandled 'error' event
          ^
TypeError: Cannot call method 'toString' of null
at new Input (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/input.js:29:24)
at Object.parse [as default] (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:54:42)
at Processor.process (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:30:16)
at Transform.stream._transform (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/index.js:44:8)
at Transform._read (_stream_transform.js:179:10)
at Transform._write (_stream_transform.js:167:12)
at doWrite (_stream_writable.js:223:10)
at writeOrBuffer (_stream_writable.js:213:5)
at Transform.Writable.write (_stream_writable.js:180:11)
at write (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at DestroyableTransform.EventEmitter.emit (events.js:92:17)
at emitReadable_ (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)

And I tried autoprefixer = autoprefixer-core as suggested.

Patrick Kostjens Patrick Kostjens · Accepted Answer · 2015-08-12T18:43:40

Personally, I would make the sass task a dependency of autoprefixer by declaring the autoprefixer task as follows:

gulp.task('autoprefixer', ['sass'], function() {
    // Your current autoprefixer code here.
});

You can then simply run the autoprefixer task.

If you really want to integrate them into one task (even though the tasks do two separate things) you can try something like this:

gulp.task('autoprefixer', function() {
    return es.concat( 
        gulp.src('./app/assets/css/')
            .pipe(sourcemaps.init())
            .pipe(postcss([autoprefixer({
                browsers: ['last 2 versions']
            })]))
            .pipe(sourcemaps.write('.'))
        ,
        sass('./app/assets/sass')
            .on('error', function(err) {
                console.error('Error!', err.message);
             }))
        .pipe(gulp.dest('./app/assets/css'));
});

Do not forget to define es as require('event-stream').

Trying to integrate gulp SASS with gulp Autoprefixer-postcss, failing miserably

3 Answers