Gulp ruby-sass and autoprefixer do not get along

9
votes

I have a styles task in my gulpfile:

gulp.task('styles', function () {
  var sass = require('gulp-ruby-sass');
  var autoprefixer = require('gulp-autoprefixer');
    return gulp.src('app/styles/main.scss')
    .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('.tmp/styles'));
});

which generates this in the console:

[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is    deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
  write main.css.map

  events.js:72
    throw er; // Unhandled 'error' event
          ^
  Error: /Users/stevelombardi/Documents/command-central/ccgulp/main.css.map:3:3: Unknown word

IF I comment out the pipe to autoprefixer, no errors, everything compiles. What's the deal here?

Note, I also cannot seem to disable the writing of a sourcemap. I tried all the other settings from the repo page for grunt-ruby-sass and none work.

I can live without autoprefixer, but would love to get it working...

2
sassgulpgulp-sassautoprefixer
Are the sass files compiled correctly without errors? – Balthazar
they are, if AP is commented out. – Steve
stackoverflow.com/questions/26979433/… – Heikki

2 Answers

6
votes

The issue seems to happen related to the main.css.map, even if you didn't want one, using [email protected] at the time I am writing this.

I've come across two different solutions so far:

1) If you don't need sourcemaps:

gulp.task('styles', function() {
    gulp.src('app/styles/main.scss')
        .pipe(sass({
            "sourcemap=none": true // hack to allow auto-prefixer to work
        }))
        .pipe(prefix("last 2 versions"))
        .pipe(gulp.dest('css'));
});

This is what I have used as I recently encountered this issue.

2) If you do need sourcemaps:

Then you should try [email protected]

(relevent github issue)

2
votes

Instead of:

browsers: ['last 2 versions'],

Try this:

browsers: ['last 2 version'],

If that doesn't work, I've had better luck with gulp-sass and gulp-sourcemaps.

// Compile Sass & create sourcemap
.pipe(sourcemaps.init())
    .pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))

// Autoprefix, load existing sourcemap, create updated sourcemap
.pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer('last 2 version')
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css'))