gulp-typescript
gulp-typescript copied to clipboard
Sourcemap generation issues (tsproject broken?)
Expected behavior: Correct sourcemaps
Actual behavior:
Different maps if manually invoked or from gulp.
I already posted this issue https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/377 here, where the author said that it was an issue with tsProject. Because it is based on the examples provided by gulp-typescript, I wanted to repost the issue here.
The issue I'm having is that manually invoking the transpiler results in different sourcemaps than using gulp.
Files:
tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true,
"pretty": true,
"strictNullChecks": true,
"skipLibCheck": true,
"strictPropertyInitialization": true,
"outDir": ".nowhere", // Bogus value; this config should not be used to transpile.
// "rootDir": "src",
"allowJs": true
}
}
tsconfig.json
{
// https://stackoverflow.com/a/37555279/7193940
"extends": "./tsconfig.base.json",
"compilerOptions": {
"allowJs": true,
"outDir": "bin"
},
"include": [
"src",
"test",
"gulpfile.js"
],
"exclude": [
"node_modules",
"bin"
]
}
tsconfig.dev.json
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"allowJs": true,
"isolatedModules": true,
"outDir": "bin",
"sourceMap": true,
// "baseUrl": "./"
},
"include": [
"src"
],
"exclude": [
"node_modules",
"bin",
"gulpfile.js"
]
}
Gulpfile.js
const gulp = require('gulp');
const tsc = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const eslint = require('gulp-eslint');
const logger = require('gulplog');
const notify = require('gulp-notify');
const nodemon = require('gulp-nodemon');
const mocha = require('gulp-mocha');
const tsProject = tsc.createProject('tsconfig.dev.json');
const config = {
source: './',
get sourceApp() { return `${this.source}src/`; },
get tsOutputPath() { return `${this.source}bin/`; },
get tsTestOutputPath() { return `${this.source}bin/`; },
get allJavaScript() { return `${this.source}bin/**/*.js`; },
get allTypeScript() { return `${this.sourceApp}**/*.ts`; },
};
/**
* Transpile all TypeScript in the project and store the output + sourcemaps in the config.tsOutputPath folder.
*/
gulp.task('transpile-ts', () => tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write('.', { sourceRoot: '.', includeContent: false }))
.pipe(gulp.dest(config.tsOutputPath)));
gulp.task('mocha', () => {
return gulp.src(['test/**/*.test.ts']).pipe(mocha({ require: 'ts-node/register', reporter: 'nyan' }));
});
/**
* Utilize nodemon to run the node server.
*/
gulp.task('start-node', () => nodemon({
// the script to run the app
script: `${config.tsOutputPath}index.js`,
// this listens to changes in any of these files/routes and restarts the application
watch: [config.sourceApp],
tasks: ['transpile'],
ext: 'ts,js',
env: {
NODE_ENV: 'development',
},
})
// .on('start', ['transpile'])
// .on('change', ['watch-no-lint'])
.on('restart', () => {
if (config.DEBUG) {
gulp.src()
.pipe(notify('Restarting node server...'));
}
}).on('crash', () => {
gulp.src()
.pipe(notify('Nodemon has crashed!'));
}));
gulp.task('transpile', gulp.series('clean-ts', 'transpile-ts'));
When using the gulp transpile command:
Source location: src/index.ts Transpiled location: bin/index.js Mapping file location: bin/index.js.map
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;AAAA,wBAAsB","file":"index.js","sourceRoot":"."}
When using tsc --p tsconfig.dev.json command:
Source location: src/index.ts Transpiled location: bin/index.js Mapping file location: bin/index.js.map
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,wBAAsB"}
As you can see, the sources of the gulp-transpile command are plain wrong, but the ones generated by tsc aren't. I'm at a total loss of what I'm doing wrong, and any pointers would be greatly appreciated. The complete project that I'm using for testing can be found here: https://github.com/MagicLegend/ts-testing-project
In the actual project I am also having issues with that all the source files are located in server/src, which confuses the source map generation even more (it adds a server/ to the sources path...)
Any help is much appreciated!