在gulp-uglify之后，typescript sourcemaps错误

Question

I have created a gulp / typescript workflow that performs the following actions.

1. gulp.watch(..)
2. gulp-typescript
3. gulp-uglify
4. gulp-sourcemaps

using the following..

var tsProject = ts.createProject('tsconfig.json') // See below for options

gulp.task('watch-ts', function () {
    return gulp.watch(paths.scriptSrc + '/**/*.ts', ['compile-ts']);
});

gulp.task('compile-ts', function () {
    var tsResult = gulp
        .src(paths.scriptSrc + '/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult
        .js
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.scripts));
});

{
    "compilerOptions": {
        "outFile": "app.js",
        "target": "es5",
        "removeComments": true,
        "noImplicitAny": false,
        "module": "system",
        "experimentalDecorators": true,
        "declaration": false,
        "noEmitOnError": true
    }
}

So after the js file + sourcemap have been created, when i attempt to step in and debug in one of my typescript files using the Chrome debugger the breakpoints jump all over the place and one line jumps to some random line for each F10 press. I believe something strange has happened when generating the sourcemaps but dont know what.

If i comment out ".pipe(uglify())" then i can debug perfectly and there are no problems.

Does anyone know what could be causing this behavior?

Answer 1

The uglify plugin strips your js-code but does not change the sourcemaps. So the mappings provided by the sourcemap do not match with your actual js-files anymore.

Most uglify-plugins have a option to generate sourcemaps on there own so you could try that.

I recommend to have two different build-tasks. One for development, which does not uglify your code and emits sourcemaps and one for production, which uglifies your code but does not emit sourcemaps.