Gulp-Sourcemaps: Chrome DevTools incorrectly references source of compiled js

Example case:

I have 3 javascript files (Act.js, Body.js, SpriteSheets.js) that are being compiled together with gulp 4.0 and source mapped with gulp-sourcemaps 2.6.4. An error is thrown on line 43 of Body.js, but the console says line 194 of Act.js. Act.js has 151 lines, so if I click the Act.js:194 link in the Console it opens up Sources and highlights the last line (151) in Act.js.

All 3 javascript sources display correctly in the Sources tab and the console prints the correct class and function names, but the console always points to Act.js, even console logs that exist in the other files.

I don’t know if this is a Chrome issue, a gulp-sourcemaps issue, or a problem with my code. Any ideas?

Gulp Compile Function:

const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');

const compileJS = (src, dest, name, include) => {
    console.log(`js compile ${src}`);
    let glob = [src];
    if (include){
        glob = include.first ? include.src.concat(glob) : glob.concat(include.src);
    return gulp.src(glob)
        // concat all js in folder and name result as folder's name
        .pipe(concat(name + '.js'))
            noSource: true,
            ext: {
                min: '.min.js'
        .pipe(sourcemaps.write('./', {
            sourceMappingURLPrefix: src.replace('./', '').replace('src', '').replace('/**', '').replace('/*.js', '')

gulp-sourcemaps Generating Incorrect Source Map

I am using Gulp to run build tasks, with the gulpfile.js shown below (require() statements removed for brevity, but I know I’m importing the correct modules). Everything is running swimmingly; there are no errors or warnings of any kind, and all files show up in the correct output folder. However, when I go to debug in Chrome, significant lines appear grayed out (see screenshot below), and I see very strange behavior when setting breakpoints (e.g., the breakpoint actually gets set on a later line). There is clearly some issue with my use of the gulp-sourcemaps module, but I can’t figure out what. All I can figure is that maybe it is not compatible with one of the other modules, but I don’t know which one.

I hate to be that guy that says “solve my bug for me!” but for the life of me I can’t find a solution to this issue. All previous posts seem to deal with Gulp not generating any source map or other build time errors, and that’s not the case here. Any help will be very much appreciated!

var wwwroot = "./wwwroot/";
var src = wwwroot;
var tmp = wwwroot + "tmp/";
var dest = wwwroot + "dist/";
var maps = "maps/";

var js = "js/";
var srcJS = src + js;
var tmpJS = tmp + js;
var destJS = dest + js;

gulp.task("convert:scripts", () => {
    // Convert JS files in separate streams
    // Wait for all of these streams by merging them
    return merge(
        convertJS(["derp1.js", "derp2.js"], "derp"),

    // Stream source JS files into the temp directory and transform them
    // Pipe them to the distribution directory, concatenating (if requested) and renaming them in the process
    // Create source maps if we are in the Development environment
    function convertJS(glob, concatName) {
        return pump([
            gulp.src( => srcJS + path), { base: srcJS }),
            isDev() ? sourcemaps.init() : util.noop(),
            eslint({ fix: false }),   // lint
            concatName ? concat(concatName) : util.noop(),   // yeah, yeah, we're using a truthy value...
            babel(),    // transpile
            uglify(),   // minify
            rename(path => path.extname = ".min.js"),
            isDev() ? sourcemaps.write(maps) : util.noop(),

function isDev() {
    return (util.env.configuration === "debug" || util.env.configuration === undefined) ? true : false;

enter image description here

Chrome DevTools points to wrong sass file in sourcemap

I generate my css and sourcemaps from sass files using gulp-sourcemaps and have noticed that sometimes, when an element has a color defined as a variable, the sourcemap points to the variable’s scss file, not the element’s scss file.

So if, for example, if a element is styled in nav.scss and the color variable is defined in colors.scss:

.navigation-top a {
font-weight: 600;
color: $color__topnav-text;
transition: color 0.2s;

The css sourcemap for that element when viewed in Chrome DevTools points to colors.scss, not nav.scss. It only happens with a few elements. DevTools still sees the correct scss file for most elements that use color variables. Is this a weird Chrome thing or a problem with the generated sourcemap?