Incorrect source maps when using Gulp with source maps plugin

Question

I have recently started using Gulp as I much prefer the syntax over Grunt and whilst I like it for the most part I have noticed when using Chrome or any browser for that matter it tells me the incorrect line mappings when looking in the inspector.

It always tells me the correct file, however it incorrectly tells me the line it is on.

What I have found is it seems to have problems with the Sass nesting; in that the line number it gives me is the line for where the first parent starts, so for example in the below code:

#foo {

    .bar {

    }

}

If I am trying to inspect an element that has the bar class, it will tell me it's on line 1 rather than 3.

Here is my gulpfile.js file:

var gulp = require('gulp');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('scripts', function() {
    gulp.src([
        'js_dev/jquery.js',
        'js_dev/plugins/*.js',
        // We have to set the bootstrap lines separately as some need to go before others
        'js_dev/bootstrap/alert.js',
        'js_dev/bootstrap/collapse.js',
        'js_dev/bootstrap/modal.js',
        'js_dev/bootstrap/tooltip.js',
        'js_dev/bootstrap/popover.js',
        'js_dev/bootstrap/tab.js',
        'js_dev/bootstrap/transition.js',
        'js_dev/scripts.js'
    ])
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('scripts.js'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./js'))
});

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: [
                'last 4 Chrome versions',
                'last 4 Firefox versions',
                'last 4 Edge versions',
                'last 2 Safari versions',
                'ie >= 10',
                '> 1.49%',
                'not ie <= 9'
            ],
            cascade: false
        }))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch(['scss/**/*.scss', 'js_dev/**/*.js'], ['scripts', 'styles']);
});

gulp.task('default', ['scripts', 'styles']);

hhsadiq · Answer 1 · 2016-11-29T16:06:01.623

The weird issue is that having more than one plugins between gulp-sourcempas is causing this issue. This is bug and currently I am able to fix is by temporarily removing extra plugins. Here is code which most probably will work

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css'));
});

I know this is not real solution, because we need all sorts of other plugins, but this is what works to show correct line numbers. You can watch this issue on github to monitor progress in this bug.

Thank you for the answer, but yeah, wouldn't work for me as I know have changed things up a bit and am also creating a minified version which uses 4 plugins between `gulp-sourcemaps`. — Brett, Nov 29 '16 at 14:53

score 0 · Answer 2 · answered Nov 19 '19 at 06:37

I commented out the autoprefixer from between less and source maps write and it shows correct line number now in my case.

gulp.src(['css/custom.less'])
        .pipe(sourcemaps.init())
        .pipe(less())
        // .pipe(autoprefixer({
        //    cascade: false
        // }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('css/'));

Incorrect source maps when using Gulp with source maps plugin

2 Answers2