CODEWITHSUNDEEP
gulpsource-mapsgulp-sourcemaps
Brett
Brett

Reputation: 20079

Incorrect source maps when using Gulp with source maps plugin

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

Upvotes: 2

Views: 1368

Answers (2)

Shashank Bhatt
Shashank Bhatt

Reputation: 857

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

Upvotes: 0

hhsadiq
hhsadiq

Reputation: 2953

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.

Upvotes: 1

Related Questions