Will the source map still work if I minify the css output?

You can do it from a single task

If you're going to serve minified files there isn't really any reason to generate individual css files for each sass file, generate maps for each, and then compress to a single minified file that further extends it's map to these individual css files.

Why?

If you need to make changes you're still going to make them in your sass files. Because any changes to these generated css files would just be overridden/lost the next time you run these Gulp tasks (i.e. rebuild).

Instead

Just concatenate all your sass into one minified css file that gets exported to production. But still maps to each individual sass file.

const gulp = require("gulp"),
      sass = require("gulp-sass"),
      rename = require("gulp-rename"),
      minCss = require("gulp-clean-css"),
      maps = require("gulp-sourcemaps");

gulp.task("compileSass", function(){
    return  gulp.src("_sass/main.scss")
                       .pipe(maps.init())
                       .pipe(sass())
                       .pipe(minCss())
                       .pipe(rename("everything.min.css"))
                       .pipe(maps.write("./"))
                       .pipe(gulp.dest("styles"));
});

Hi, Simon. I believe it will, but because minification removes space/line breaks, I think you'll only see filename.scss:1 because technically it will all be on one line.

I have done a bit more work on my gulp build pipeline and managed to resolve my problem, at least when dealing with my scripts. I found that passing {loadMaps: true} into sourcemaps.init() during the minify task seems to make sourcemaps use the first sourcemap as a reference to relate the minified file back to the very orignal source file. Bellow is an extract of my scripts section of my gulp build process

  gulp.task("concatScripts", ['lintScripts'], function() {
    return gulp.src([
      config.paths.dep + '/jquery-1.11.3/jquery-1.11.3.js',
      config.paths.dep + '/bootstrap/bootstrap.js',
      config.paths.src + '/js/plugins.js',
      config.paths.src + '/js/script.js'
    ])
    .pipe($.sourcemaps.init())
    .pipe($.concat('script.js'))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.paths.dist + '/js'));
  });

  gulp.task("minifyScripts", ["concatScripts"], function() {
    return gulp.src(config.paths.dist + "/js/script.js")
    .pipe($.sourcemaps.init({loadMaps: true}))
    .pipe($.uglify())
    .pipe($.rename('script.min.js'))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.paths.dist + '/js'));
  });