How to use source maps with gulp?

Question

How to use source maps with gulp?

...
sourcemaps  = require('gulp-sourcemaps'),
concat      = require('gulp-concat'),
uglify      = require('gulp-uglify'),
...

gulp.task('concat-all-js', function() {
    return gulp
        .src([
            'app/app.js',
            'app/**/*.js'
        ])
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/'));
});

I add two files: app.min.js and app.min.js.map

But when I put the error in my app.min.js file, my source maps do not work.

I activated this option in my browser (Chrome), but I always see this error:

ReferenceError: blabla is not defined
    at Object.formModel (http://localhost/dist/app.min.js:1:23964)

My files are the same / dist folder .

I see this line in my app.min.js (last line):

//# sourceMappingURL=app.min.js.map

Answer 1

It looks like a bug in the code causing Gulp to bomb, and not do something with the source maps. You probably just need to improve how you handle errors. Try replacing:

.pipe(uglify())

FROM

.pipe(uglify(uglifyOptions).on('error', function(uglify) {
        console.error(uglify.message);
        console.error("Line "+uglify.lineNumber);
        this.emit('end');
    }))

Currently, if there is an error in the code, Gulp is called.

( , .)