Sourcemap source files are empty using gulp-uglifyjs

Question

Looks like the source map files are blank.

My code is as follows.

gulp.src(sources)
    .pipe(uglifyjs('app.min.js', {
        outSourceMap: true
    }))
    .pipe(gulp.dest('public/js'))
    .pipe(notify({message: 'Scripts task complete'}));

in the browser my image looks like this

Notice how the source files are blank. Not sure what I am doing wrong here. Can you please help.

I will add that my source files are using the module pattern i.e.

(function () {
"use strict";
//my code in here
}())

Answer 1

Per the gulp-uglifyjs documentation:

• outSourceMap

  (default false) Give a string to be the name of the source map. Set to true and [...]

  Note: if you would like your source map to point to relative paths instead of absolute paths (which you probably will if it is hosted on a server), set the basePath option to be the base of where the content is served.

[...]

• sourceRoot

  Sets the root location for where the source files should be found

With the above in mind, you likely need to add two options to your gulp-uglifyjs call in your gulpfile:

1. sourceRoot, whose value is the url of the server from which you want to be able to access the source maps (e.g. http://localhost:3000).

2. basePath, which should map from your gulpfile's containing directory to the relative path of your webserver root. For example, if your webserver is serving it's content from the directory 'src' within your gulpfile's containing directory you would want to use a value of "/src".

The following example assumes you're running a webserver at http://localhost:3000 and that your webserver root is in a directory "src" immediately within the directory containing your gulpfile:

gulp.src(sources)
.pipe(uglifyjs('app.min.js', {
    outSourceMap: true,
    basePath: "/src",
    sourceRoot: "http://localhost:3000"
}))
.pipe(gulp.dest('public/js'))
.pipe(notify({message: 'Scripts task complete'}));

Helpful references:

1. https://www.npmjs.com/package/gulp-uglifyjs
2. http://lisperator.net/uglifyjs/codegen