gulp: concat, uglify and inline JavaScript - sourcemaps not working

Question

I'm working on a AngularJS application and using gulp for the build-process. I have multiple JavaScript files (for controllers, services, directives, etc.) which I concat, uglify and then inline into an index.html in order to minimize the amount of server connections.

Here comes the problem:

When I do not inline the concatenated and uglified JavaScript files into index.html, the sourcemaps work when I debug the application with the developer tools.
When I do inline the JavaScript files into index.html, then my breakpoints are never hit. Why? I'm not sure, what I'm doing wrong.

This is the relevant part of my gulpfile:

// isPublish is set to true to uglify.
// the temp-folders are here just for testing purposes, I tried with
// and without and I have also changed the order of the gulp-command.
return gulp.src(definition.srcs)
           .pipe(sourcemaps.init())
           .pipe(replace("$build:serverApiBaseUrl$", args.serverApiBaseUrl || "..."))
           .pipe(gulp.dest(targetFolder + "/temp1"))
           .pipe(concat(definition.targetFile))
           .pipe(gulp.dest(targetFolder + "/temp2"))
           .pipe(gulpif(isPublish, uglify()))
           .pipe(sourcemaps.write("./"))
           .pipe(gulp.dest(targetFolder));

Please see here for the whole solution, e.g. for the project structure, etc. Even though I think this isn't really of any relevance for my problem.

Another thing I realized is that even though the breakpoints get hit (when not using the "inlined"-mode), the variable names are still in the mangled format (i.e. only letters). Is this a expected browser behavior (i.e. do developer tools not support this?), or do I need to specify something special for the sourcemaps-command? I don't understand why, as the generated sourcemaps contain the names-information.

Update I (13.10.2015)

I realized I could also use following method:

return gulp.src(paths.target + "index.html")
           .pipe(inline({
                base: paths.target,
                js: uglify()
           }))
          .pipe(gulp.dest(paths.target));

This however doesn't seem to work due to a issue in gulp-inline. There seems to be a pull request, no idea when it will be merged back though. And even if it would work, I'm not sure what will happen with the sourcemaps in that case..?

Update II (19.10.2015)

Version 0.1.0 of gulp-inline has been released today (see pull request mentioned in "Update 1" which has now been merged back). It now works correctly with gulp-uglify, i.e. the bug has been fixed. I still couldn't get the sourcemaps to work though. Not sure if this is supported by gulp-inline.

So for the time being, I'm still searching for a solution..

gulp: concat, uglify and inline JavaScript - sourcemaps not working

0 Answers0