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")); 
});