Two Sass Sourcemaps in One Gulp Stream

Question

I created a Gulp task, styles, that creates minified and non-minified CSS files from Sass files. I would like to also create minified and non-minified Sourcemaps, however, this doesn't appear to be working.

Here is the code:

// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
  return gulp.src('./assets/scss/**/*.scss')
    .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red(error.message));
            this.emit('end');
    }))
    .pipe(sourcemaps.init()) // Start Sourcemaps
    .pipe(sass())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
    .pipe(sourcemaps.write('../maps'))    
    .pipe(gulp.dest('./assets/css/')) // Create sourcemap
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(sourcemaps.write('../maps')) // Create minified sourcemap
    .pipe(gulp.dest('./assets/css/'))
});    

Currently, this throws an error and doesn't create the minified sourcemap. However, if I remove one of the sourcemap.write instances, then it works completely fine.

Is it possible to create two sourcemaps in one stream?

Answer 1

How about implementing something like this?

https://github.com/ben-eb/gulp-cssnano/issues/21

Edit: My attempt from the above link.. I got this to run without any errors.

   // Grab our gulp packages
var gulp  = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    cssnano = require('gulp-cssnano'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    bower = require('gulp-bower'),
    merge = require('merge-stream'),
    clone = require('gulp-clone'),
    browserSync = require('browser-sync').create(),
    clip = require('gulp-clip-empty-files');

gulp.task('styles', function() {
    var source = gulp.src('./assets/scss/**/*.scss')
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red(error.message));
            this.emit('end');
    }))
        .pipe(sass())
        .pipe(sourcemaps.init()) // Start Sourcemaps
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
    }));

    var pipe1 = source.pipe(clone())
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('./assets/css/')); // Create sourcemap

    var pipe2 = source.pipe(clone())
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(sourcemaps.write('../maps')) // Create minified sourcemap
    .pipe(clip())
    .pipe(gulp.dest('./assets/css/'));

    return merge(pipe1, pipe2);
});

---

If like cimmanon was suggesting that you may not want to have a minified source map, just delete the

.pipe(sourcemaps.write('../maps')) // Create minified sourcemap

from

var pipe2