gulp-typescript mit gulp-sourcemap: Ausgabedateien in dasselbe Verzeichnis

Question

Ich verwende gulp-typescript und gulp-sourcemaps, um TypeScript mit Quellkarten zu kompilieren. Ich möchte sowohl die .js als auch die Quellkartendateien in das gleiche Verzeichnis wie die ursprüngliche .ts Datei ausgeben.

Ich verwende eine tsconfig.json Datei, um TypeScript zu konfigurieren, und ich verwende typings für die Verwaltung von TypeScript-Definitionsdateien. Der gesamte Code befindet sich im Verzeichnis js. Hier ist meine Projektstruktur:

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

Jetzt würde ich app.js wie im js Verzeichnis angezeigt werden soll, und someScript.js in js/subdir erscheinen. Außerdem möchte ich beim Debuggen in Chrome dieselbe Ordnerstruktur auf der Registerkarte "Quellen" beibehalten.

Ich habe die folgenden schluck Aufgabe dafür konfiguriert:

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

Diese effektiv gibt die .js Dateien in den richtigen Verzeichnissen. Wenn Sie dies jedoch in Chrome ausführen und die Entwicklungstools öffnen, befinden sich die Dateien .ts in einem Quellverzeichnis unter dem Stammverzeichnis, was bedeutet, dass die Quellkartendateien ein falsches Stammverzeichnis enthalten.

Was sollte geändert werden, um die .ts Dateien und die .js Dateien an der gleichen Stelle anzuzeigen?

Hinweis: Diese Frage ist ähnlich this, außer dass ich tsconfig.json verwenden möchten, und somit nicht gulp.src oder seine base Eigenschaft nutzen können.

Answer 1

Setzen Sie einfach die sourceRoot Eigenschaft der gulp-sourcommap Schreiboptionen. Diese Aufgabe funktioniert:

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