gulp-typescript with gulp-sourcemap：將文件輸出到同一目錄

Question

我使用gulp-typescript和gulp-sourcemaps來編譯帶有源圖的TypeScript。我想將.js和源映射文件都輸出到與原始文件.ts相同的目錄中。

我正在使用tsconfig.json文件來配置TypeScript，並且我正在使用typings來管理TypeScript定義文件。我所有的代碼都在js目錄中。這裏是我的項目結構：

project root 
|-- js/ 
| |-- subdir/ 
| | |-- someScript.ts 
| |-- app.ts 
|-- typings/ 
| |-- someDefinitionFile.d.ts 
|-- gulpfile.js 
|-- tsconfig.json 

現在我想app.js出現在js目錄，someScript.js出現在js/subdir。另外，在Chrome中進行調試時，我希望在「來源」標籤中保留相同的文件夾結構。

我已經配置了以下一飲而盡任務是：

var gulp = require("gulp"); 
var ts = require("gulp-typescript"); 
var tsProject = ts.createProject("tsconfig.json"); 
var sourcemaps = require('gulp-sourcemaps'); 

gulp.task("ts", function() { 
    var tsResult = tsProject 
     .src() 
     .pipe(sourcemaps.init()) 
     .pipe(ts(tsProject)).js 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest("js")); 
}); 

這有效地輸出正確的目錄中的文件.js。但是，在Chrome中運行此操作並打開開發工具時，.ts文件位於根目錄下的「源」目錄中，這意味着源映射文件包含不正確的根目錄。

應該更改什麼以在同一位置顯示.ts文件和.js文件？

注：這個問題類似於this一個，但我想用tsconfig.json，因而無法使用gulp.src或其base財產。

Answer 1

只需設置gulp-sourcemap寫選項的sourceRoot屬性即可。此任務有效：

gulp.task("ts", function() { 
    tsProject.src() 
     .pipe(sourcemaps.init()) 
     .pipe(ts(tsProject)).js 
     .pipe(sourcemaps.write({sourceRoot: "/js"})) 
     .pipe(gulp.dest("js")); 
});