CSS Sourcemaps not correctly generated using gulp, SASS and autoprefixer

Question

I have the following gulp task:

var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'); gulp.src('html/css/sass/*.scss') .pipe(sass({ style: 'compressed', loadPath: 'plugin/css/sass', sourcemap: true, sourcemapPath: '/css/sass', container : 'local_sass' })) .pipe(autoprefixer()) .pipe(gulp.dest('html/css')); 

The problem I ran into is that the SASS compiler correctly generates the source maps and adds the sourcemap comment, but then autoprefixer removes the comment (and I don't think it also updates the source maps).

I tried to remove autoprefixer and it works fine, but when I get it back they will comment on it. I also tried adding { map: true } , but then each sourcemap just has the name to.css.map . I also tried adding from and to , but I don’t know how to do this to indicate the current file name, so that it is always written to the same file name.

How can I get autoprefixer to collaborate and update the source files ? Is there any other plugin I need to use?

Packages:

 "gulp": "~3.8.6", "gulp-autoprefixer": "~0.0.8", "gulp-ruby-sass": "~0.7.0", 

Answer 1

You can use gulp-sourcemaps if you switch to gulp-sass . Both gulp-sass and gulp-autoprefixer support gulp source maps.

The implementation will look something like this:

 var gulp = require('gulp'); var gulpSass = require('gulp-sass'); var gulpAutoprefixer = require('gulp-autoprefixer'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() { gulp.src('src/**/*.scss') .pipe(sourcemaps.init()) .pipe(gulpSass()) .pipe(gulpAutoprefixer()) .pipe(sourcemaps.write('../maps')) .pipe(gulp.dest('dist')); }); 

To write .map files in the map directory.

Note All manipulations with the .scss source for the target .css must be in the stream between sourcemaps.init() and sourcemaps.write() . This includes any minification, such as gulp-uglify , which also supports gulp-sourcemaps .

Answer 2

I created a small gulp plugin to enable source map support for autoprefixer using gulp :

 var through = require('through2'); var prefix = require('autoprefixer'); var applySourceMap = require('vinyl-sourcemaps-apply'); module.exports = function(browsers, options) { options = options || {}; return through.obj(function(file, enc, cb) { if(file.isStream()) { throw new Error('Streams not supported'); } if(!file.isNull()) { if(file.sourceMap) { options.map = { annotation: false }; options.to = options.from = file.relative; } var contents = file.contents.toString(); var result = prefix(browsers).process(contents, options); contents = result.css; file.contents = new Buffer(contents); if(file.sourceMap) { applySourceMap(file, result.map.toString()); } } this.push(file); cb(); }); }; 

It uses gulp-sourcemaps , so any gulp plugin that supports gulp-sourcemaps can be used in the stream pipeline:

 var sourcemaps = require('gulp-sourcemaps'); var concat = require('gulp-concat'); // Supports gulp-sourcemaps var prefixer = require('./gulp-autoprefixer-map.js'); gulp.task('css', [], function() { gulp.src('src/**/*.css') .pipe(sourcemaps.init()) .pipe(concat('app.css')) .pipe(prefixer()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dest/')) }); 

Unfortunately, there is no support for SASS yet, but maybe someone can use the above to crack the plugin together and update this answer.