RBasniak RBasniak - 2 months ago 39
TypeScript Question

Gulp not generating inline sourcemaps

I have the following

tsconfig.json
file in an ASP.NET Core:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"inlineSourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitOnError": false,
"noImplicitAny": false,
"removeComments": false,
"outDir": "wwwroot/client-app"
},
"exclude": [
"node_modules",
"wwwroot",
"typings"
]
}


When I build the project through Visual Studio the resulting js files have the inline source maps at the end of the file:

/// <reference path="../typings/index.d.ts" />
"use strict";
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
var client_application_module_1 = require('./client-application.module');
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(client_application_module_1.ClientApplicationModule);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9vdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL0NsaWVudEFwcC9ib290LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhDQUE4Qzs7QUFFOUMseUNBQXVDLG1DQUFtQyxDQUFDLENBQUE7QUFDM0UsMENBQXdDLDZCQUE2QixDQUFDLENBQUE7QUFFdEUsaURBQXNCLEVBQUUsQ0FBQyxlQUFlLENBQUMsbURBQXVCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHBhdGg9XCIuLi90eXBpbmdzL2luZGV4LmQudHNcIiAvPlxyXG5cclxuaW1wb3J0IHsgcGxhdGZvcm1Ccm93c2VyRHluYW1pYyB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYyc7XHJcbmltcG9ydCB7IENsaWVudEFwcGxpY2F0aW9uTW9kdWxlIH0gZnJvbSAnLi9jbGllbnQtYXBwbGljYXRpb24ubW9kdWxlJztcclxuXHJcbnBsYXRmb3JtQnJvd3NlckR5bmFtaWMoKS5ib290c3RyYXBNb2R1bGUoQ2xpZW50QXBwbGljYXRpb25Nb2R1bGUpOyJdfQ==


But when I build the js files with Gulp, the inline sourcemap is not being generated, like if it was ignoring the
tsconfig.json


Here is my Gulp task for transpiling TypeScript to JavaScript:

var tsProject = ts.createProject('tsconfig.json');

gulp.task('transpile', function ()
{
var tsResult = gulp.src(["ClientApp/**/*.ts"])
.pipe(ts(tsProject), undefined, ts.reporter.fullReporter()).js
.pipe(gulp.dest('./wwwroot/client-app'));
});


Do I need any extra configuration in Gulp so the inline sourcemaps can be generated?

I'm using TypeScript 1.8.10

Answer

I never managed to get it working with the simple typescript gulp task, I always use the gulp-sourcemaps plugin to do this.

Usually something like this:

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

gulp.task('typescript', function () {
    gulp.src(["ClientApp/**/*.ts"])
        .pipe(sourcemaps.init())
        .pipe(typescript())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wwwroot/client-app'))    
});