将 Gulp 与源映射插件一起使用时，源映射不正确

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']);

Answer 1

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.

Answer 2

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/'));