So, how does one integrate gulp-ruby-sass into this flow?

[smlombardi]

So, how does one integrate gulp-ruby-sass into this flow?

[TrySound]

@smlombardi Show log. Show build code.

[smlombardi]

Please see https://stackoverflow.com/questions/31944848/trying-to-integrate-gulp-sass-with-gulp-autoprefixer-postcss-failing-miserably

[TrySound]

@smlombardi Try this

gulp.task('style', function(done) {
  return sass('source', { sourcemap: true })
    .on('error', done)
    .pipe(postcss([autoprefixer({
      browsers: ['last 2 versions']
    })]))
    .on('error', done)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('result'))
    .pipe(reload({ stream: true }));
});

[TrySound]

@smlombardi But if you start new project try to use postcss alternatives like precss or cssnext. You can also combain different plugins and for example use cssnext with nested.

[smlombardi]

I get this with the above code:

STARYU:designsystem stevelombardi$ gulp style
[13:54:31] Using gulpfile ~/Documents/designsystem/gulpfile.js
[13:54:31] Starting 'style'...
[13:54:32] gulp-ruby-sass stdout: directory
[13:54:32] gulp-ruby-sass stdout: write design_system.css
      write design_system.css.map
[13:54:32] gulp-ruby-sass stdout: write live_preview.css
      write live_preview.css.map
[13:54:33] 'style' errored after 1.03 s
[13:54:33] TypeError in plugin 'gulp-postcss'
Message:
    object is not a function
STARYU:designsystem stevelombardi$ 

Here, with my paths added:

gulp.task('style', function(done) {
  return sass('app/assets/sass/', {
      sourcemap: true
    })
    .on('error', done)
    .pipe(postcss([autoprefixer({
      browsers: ['last 2 versions']
    })]))
    .on('error', done)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app/assets/css/'))
    .pipe(reload({
      stream: true
    }));
});

[rstuart85]

I can this same error with the same workflow. Any idea's what is happening here?

[rstuart85]

For what it is worth, if you remove autoprefixer as a postprocessor, it seems to work.

[TrySound]

@smlombardi @rstuart85 Show whole code

[rstuart85]

Fix posted on the stackoverflow question. Essentially, it seems to be down to which package you are using autoprefixer from. This doesn't work (produces the error described):

var autoprefixer = require('gulp-autoprefixer');

This does work (no more error):

var autoprefixer = require('autoprefixer-core');

That's all you need to change. You can test with the code posted above.