title: Trying to integrate gulp SASS with gulp Autoprefixer-postcss, failing miserably
body: <p>So, Autoprefixer has been bugging me to use the updated postcss version so I am trying to update my Gulp file.</p>
  
  <p>The problem is all the examples do not integrate Sass as the first step; I use gulp-ruby-sass.</p>
  
  <p>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:</p>
  
  <pre><code>  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
    }));
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>  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'));
  });
  </code></pre>
  
  <p>I was trying to run them as a sequence, but would rather integrate them:</p>
  
  <pre><code>gulp.task('styles', function() {
    runSequence('sass', 'autoprefixer');
  });
  </code></pre>
  
  <p>I just cannot put together the pipe that gets ruby-sass, autoprefixer, and sourcemaps to all work together.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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:</p>
  
  <pre><code>    [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)
  </code></pre>
  
  <p>And I tried autoprefixer = autoprefixer-core as suggested.</p>