autoprefixer with compressed sass compilation

[emersonthis]

I'm trying to get autoprefixer to play nice with my current gulp task for compiling sass. It seems to work find if I pass it an uncompressed file. But if I pass it the minified output from gulp-ruby-sass, nothing happens. Here's the task:

gulp.task('sass', function() {
        gulp.src('app/webroot/scss/**/*.scss')
        .pipe(sass({style: 'compressed'}))
        .pipe(gulp.dest("app/webroot/css"));

        //autoprifixer
        gulp.src('app/webroot/css/style.css')
        .pipe(autoprefixer({
          browsers: ['last 3 versions'],
          cascade: false
        }))
        .pipe(gulp.dest('app/webroot/css'));
});

What am I doing wrong?

[Andrey Sitnik]

You use Gulp wrong. In this task you create 2 async processors. So Autoprefixer didn’t start after Sass, Autoprefixer starts in parallel.

So in some cases (when Sass works longer) Autoprefixer doesn’t see anything in app/webroot/css/style.css.

[Andrey Sitnik]

Correct task:

gulp.task('sass', function() {
        gulp.src('app/webroot/scss/**/*.scss')
        .pipe(sass({style: 'compressed'}))
        .pipe(autoprefixer({
          browsers: ['last 3 versions'],
          cascade: false
        }))
        .pipe(gulp.dest('app/webroot/css'));
});

[Andrey Sitnik]

BTW, there is no need to disable cascade. Autoprefixer checks, does CSS in compressed. And if CSS was compressed, it miss cascade.

[emersonthis]

Thanks!

In case anyone else stumbles on this thread, I also had to upgrade to a newer version of gulp-ruby-sass in order to DISABLE sourcemaps (which the earlier version generated automatically): https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0 https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0

On Jan 16, 2015, at 6:17 AM, Andrey Sitnik [e-mail] wrote:

BTW, there is no need to disable cascade. Autoprefixer checks, does CSS in compressed. And if CSS was compressed, it miss cascade.

—
Reply to this email directly or view it on GitHub #25 (comment).