How to load sourcemaps with uglifyjs2 and Ionic?

Question

For my Ionic app, I am using some gulp tasks to minify the Javascript code. Uglifyjs2 minifies the code:

gulp.task('uglify', () => {
    gulp.src(paths.uglify)
    .pipe(uglify('app.min.js', {
        outSourceMap: true
    }))
    .pipe(gulp.dest('./www/dist/js-uglify'));
});

This generates the files

www
| dist
| | js-uglify
| | | app.min.js
| | | app.min.js.map

app.min.js thus ends with //# sourceMappingURL=app.min.js.map

In my index.html I have the following reference:

<script src="dist/js-uglify/app.min.js"></script>

When I build and run my app via ionic run the file app.min.js is loaded. However, the sourcemap is missing. Chrome seems to be set up properly (the option Enable JavaScript source maps is set).

How can I tackle this problem? Should the Network list of transmitted files contain an entry for the source map? Can I somehow manually force Chrome to load the map?

score 0 · Answer 1 · answered Jul 24 '16 at 06:14

I am not familiar with uglifyjs, but a quick look at some ionic software that uses it online suggests that maybe you did not configure your flags correctly. It looks like you are meant to run

uglifyjs [input files] [options]

Using the option --source-map output.js.map.

Ok, another thing which may be relevant: according to the gruntjs GitHub, that sourceMappingURL flag no longer works.

Version 3.x introduced changes to configuring source maps ...

sourceMappingURL - This is calculated automatically now sourceMapPrefix - No longer necessary for the above reason ...

sourceMap - Only accepts a Boolean value. Generates a map with a default name for you sourceMapRoot - The location of your sources is now calculated for you when sourceMap is set to true but you can set manual source root if needed

So maybe instead of using sourceMappingURL you should just set the boolean to true? Hope this helps!

score 0 · Answer 2 · edited May 23 '17 at 12:32

gulp-uglifyjs is deprecated. It's possible that your sourcemaps are not being created properly.

Current best practice is to use the following modules to uglify/concat/sourcemap your code:

gulp-uglify
gulp-concat
gulp-sourcemaps

Example:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('build-js', function () {
    return gulp.src('app/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }))
    .pipe(gulp.dest('dist'));
});

See this related answer for an explanation of why these gulp modules work better.

Also, in Chrome, the app.min.js.map file does not show up in the Network tab. You'll know if your sourcemaps have been loaded if they show up in the Sources tab in an orange colored folder.

How to load sourcemaps with uglifyjs2 and Ionic?

2 Answers2