当使用Gulp源地图插件时，源地图不正确

Question

我最近开始使用Gulp，因为我更喜欢Grunt的语法，虽然我很喜欢使用Chrome或任何浏览器，在检查员中查看时，我会看到不正确的线路映射。

它总是告诉我正确的文件，但它错误地告诉我线它是。

我发现的是它似乎有问题Sass筑巢;在该行数它给我的第一个父开始，在此线，因此，例如在下面的代码：

#foo { 

    .bar { 

    } 

} 

如果我想检查具有bar类的元素，它会告诉我在线1而不是3。

这里是我的gulpfile.js文件：

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

怪异的问题是，有gulp-sourcempas之间不止一个插件导致了此问题。这是错误，目前我能够解决的是暂时删除额外的插件。下面是代码很可能将工作

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

我知道这是不是真正的解决办法，因为我们需要各种其他插件，但是这是什么工程，以显示正确的行号。你可以在github上观看这个issue来监视这个bug的进展情况。