當使用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的進展情況。