Combining gulp-sourcemaps with gulp-csso and gulp-sass

Question

I'm trying to get this part of my gulpfile.js to work:

gulp.task('compileSass', function() {
    return gulp.src(folders.src+'/scss/*scss')
    .pipe(sass())
    .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
    return gulp.src(folders.dest+'/css/style.css')
    .pipe(maps.init())
    .pipe(minCss({
        sourceMap: true
    }))
    .pipe(maps.write('./'))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(folders.dest+'/css'));
});

I'd like dev tools to show the .scss files. I'm not sure if it has to do with the rename() or if I'm calling my sourcemaps at the wrong time, but when I check the dev tools, the source is always style.min.css.

Answer 1

I don't see an initial mapping on your sass task. You need to call this twice, and set loadMaps appropriately per the docs. Try the following...

gulp.task('compileSass', function() {
  return gulp.src(folders.src+'/scss/*scss')
  .pipe(maps.init()) /* `init` here */
  .pipe(sass())
  .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
  return gulp.src(folders.dest+'/css/style.css')
  .pipe(maps.init({
    loadMaps: true /* `init` again, load prior from sass */
  }))
  .pipe(minCss({
    sourceMap: true
  }))
  .pipe(maps.write('./'))
  .pipe(rename('style.min.css'))
  .pipe(gulp.dest(folders.dest+'/css'));
});