How can I use gulp to create Typescript sourcemaps in different files rather than inside the javascript files?

Question

I have a project where I am using gulp. I would like to have the typescript files converted to javascript and to have source maps also. Here is what I have right now:

var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');

gulp.task('typescript', function () {
    gulp.src('app/**/*.ts')
        .pipe(typescript())
        .pipe(sourcemaps.init())     
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('app'))    
});

This works partly but the sourcemaps all appear inside the javascript. Can anyone tell me how I can make it so that it creates a sourcemap file for each javascript rather than have the map inside?

Answer 1

You are writing your sourcemaps.write() to be inline.

From the gulp-sourcemaps repo

To write external source map files, pass a path relative to the destination to sourcemaps.write().

Should be -

var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');

gulp.task('typescript', function () {
    gulp.src('app/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('app'))    
});

See if that fixes your issue.