gulp-sourcemaps將源文件指向錯誤的目錄

Question

我試圖用gulp-sourcemaps爲我的sass和js文件創建源映射，但sources: [ ... ]中的路徑始終只相對於源而不是目標目錄。

我的項目結構如下：

project 
|-- public/ 
| |-- css/ 
| | |-- main.scss 
| | `-- dashboard.scss 
| |-- js/ 
| | |-- dashboard/ 
| | | `-- dashboard.js 
| | `-- app.js 
| |-- index.html 
| |-- app.min.js 
| |-- app.min.js.map 
| |-- style.css 
| `-- style.css.map 
`-- gulpfile.js 

這些都是我的兩個大口任務：

gulp.task('sass', function() { 
    // only need main.scss because I'm using @import 
    return gulp 
     .src('./public/css/main.scss') 
     .pipe(sourcemaps.init()) 
      .pipe(sass()) 
     .pipe(rename('style.css')) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest('./public')); 
}); 

gulp.task('uglify', function() { 
    return gulp 
     .src(['./public/js/app.js', './public/js/**/*.js']) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('app.concat.js')) 
      .pipe(uglify()) 
     .pipe(rename('app.min.js')) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest('./public')); 
}); 

映射文件看起來像這樣運行這些任務後：

{"version":3,"sources":"main.scss","dashboard.scss"], ... } 
{"version":3,"sources":["app.js","dashboard/dashboard.js"], ... } 

但我希望他們是相對他們的實際目錄

{"version":3,"sources":["css/main.scss","css/dashboard.scss"], ... } 
{"version":3,"sources":["js/app.js","js/dashboard/dashboard.js"], ... } 

那麼如何才能得到想要的結果？我的配置有什麼問題？

Answer 1

要使用吞-sourcemaps控制在一個sourcemap文件的源的路徑，你應該通過一個選項參數到sourcemaps.write命令，在其中指定爲sourceRoot相對目錄。例如：

gulp.task('javascript', function() { 
 
    var stream = gulp.src('src/**/*.js') 
 
    .pipe(sourcemaps.init()) 
 
     .pipe(plugin1()) 
 
     .pipe(plugin2()) 
 
    .pipe(sourcemaps.write({includeContent: false, sourceRoot: '/src'})) 
 
    .pipe(gulp.dest('dist')); 
 
});

這個片段被從gulp-sourcemaps documentation服用。對於一個示例，請參見本GitHub的repository，其中I使用吞-sourcemaps與吞-打字稿到地圖生成的JavaScript源文件回到打字原稿文件。