CODEWITHSUNDEEP
gulpgulp-sass
Darryl Hein
Darryl Hein

Reputation: 145117

CSS Sourcemaps not generating properly with gulp, SASS, & autoprefixer

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'm having is the SASS compiler is properly generating the sourcemaps and adding the sourcemap comment, but then autoprefixer removes the comment (and I don't think it's updating the sourcemaps either).

I've tried removing autoprefixer and it works perfectly, but when I put it back in, they comment is removed. 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 tell it current filename so it always writes to the same filename.

How would I go about getting autoprefixer to co-operate and update the sourcemaps? Is there another plugin I need to use?

Packages:

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

Upvotes: 6

Views: 8143

Answers (2)

linuxdan
linuxdan

Reputation: 4864

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

Implementation would look something like:

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'));
});

Which would write .map files in a maps directory.

Note: All manipulations from source .scss to 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.

Upvotes: 7

null
null

Reputation: 7926

I've created a small gulp plugin to enable source map support for autoprefixer with 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's making use of gulp-sourcemaps, so any gulp plugin that support 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's no support yet for SASS yet, but maybe someone can use the above to hack a plugin together and update this answer.

Upvotes: 0

Related Questions