Debugging variables not working with sourcemaps + uglify

I have the following gulp task for bundling javascript:

gulp.task('js', function () {
    return gulp.src(paths.js)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('bundle.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

When I run this in the Chrome dev tools, sourcemaps are found and breakpoints work, but variables can’t be debugged.

Take this example chunk of angular code:

iarApp.config(['$animateProvider', function ($animateProvider) {
    $animateProvider.classNameFilter(/angular-animate/);
}]);

If I add a breakpoint to see the value of $animateProvider, I get the following:

But if I turn off variable mangling in Uglify:

.pipe(uglify({ mangle: false }))

Then it works:

So it seems that the gulp-sourcemaps plugin can’t follow up variables after Uglify mangles the names.

Can anyone else get the same issue and/or know a solution?

[rafaelcamargo]

@fernandoneira I have just tried your workaround { mangle: false } and works fine. Thanks man!

[phated]

This is a sourcemap problem, not a gulp-sourcemaps issue.