Typescript sourcemaps wrong after gulp-uglify

Question

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

gulp.watch(..)
gulp-typescript
gulp-uglify
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?

hi @smartmouse, i would like to make it available to a 3rd party. — Grant
– Grant, Commented Jul 17, 2016 at 23:20

Leon · Accepted Answer · 2018-03-13 12:48:41Z

0

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.

answered Mar 13, 2018 at 12:48

Leon

4804 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript sourcemaps wrong after gulp-uglify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related