gulp-typescript with gulp-sourcemap: output files to same directory

Question

I'm using gulp-typescript and gulp-sourcemaps to compile TypeScript with sourcemaps. I want to output both the .js and the source map files to the same directory as the original .ts file.

I'm using a tsconfig.json file to configure TypeScript, and I'm using typings for managing TypeScript definition files. All of my own code is in the js directory. Here's my project structure:

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

Now I would like app.js to appear in the js directory, and someScript.js to appear in js/subdir. Plus, when debugging in Chrome, I would like to keep the same folder structure in the 'Sources' tab.

I've configured the following gulp task for this:

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

This effectively outputs the .js files in the correct directories. However, when running this in Chrome and opening Development tools, the .ts files are located in a 'source' directory under the root, meaning the source map files contain an incorrect root.

What should be changed to show the .ts files and the .js files in the same location?

Note: this question is similar to this one, except that I want to use tsconfig.json, and thus cannot use gulp.src or its base property.

Answer 1

Just set the sourceRoot property of the gulp-sourcemap write options. This task works:

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