带有gulpsourcemap的gulptypescript:将文件输出到同一目录

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文件位于根目录下的"source"目录中，这意味着源映射文件包含不正确的根目录。

应更改哪些内容以在同一位置显示.ts文件和.js文件？

注意：这个问题与这个问题类似，只是我想使用tsconfig.json，因此不能使用gulp.src或其base属性。

Answer 1

只需设置gull源映射写入选项的sourceRoot属性。此任务有效：

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