Preserving sourcemaps when merging JS streams (to concat lib dependencies with browserify bundle)

In my current workflow I need to create browserify bundles, but also wish to concat non-commonjs js libraries to the beginning of the file to expose global variables but also reduce the number of http requests and size of js files. (Some of these libraries may also be needed by other bundles)

I currently have a gulp task that creates the browserify bundle and concats any required libs to the beginning of the output file, however I'm finding that at the point of merging the streams, my sourcemaps are breaking, and in web inspector; the resulting map only shows the pre-uglified browserify bundle, and not the individual js modules.

var gulp          = require("gulp"),
buffer            = require('vinyl-buffer'),
gulpif            = require("gulp-if"),
sourcemaps        = require("gulp-sourcemaps"),
merge             = require('merge-stream'),
concat            = require('gulp-concat'),
uglify            = require("gulp-uglify")
livereload        = require("gulp-livereload");

// compile scripts
gulp.task("scripts", function() {
  "use strict";

  // Iterate over bundles
  var tasks = config.browserifyBundles.map(function(item){

    // Use entry file for output file name
    var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); 
    var browserifyStream = browserify({
      entries: item.mainfile,
      debug: env !== "production"
    }).bundle()
    .on("error", notify.onError())
    .pipe(source(outputName))
    .pipe(buffer())
    .pipe(gulpif(env !== "production", sourcemaps.init()))
    .pipe(gulpif(env !== "production", sourcemaps.write()));

    // Get files to concat stream from json array
    var libStream = gulp.src(item.concat);

    return merge(libStream, browserifyStream)
      .pipe(gulpif(env !== "production", sourcemaps.init({loadMaps: true})))
      .pipe(concat(outputName))
      .pipe(uglify())
      .pipe(gulpif(env !== "production", sourcemaps.write()))
      .pipe(gulp.dest(config.projectDir + "js/"))
      .pipe(notify("updated"))
      .pipe(livereload());
  });


  // create a merged stream
  es.merge.apply(null, tasks);
});

(note that my task also reads a config json array to build several bundles, if more than one is present)

Is there a way I can preserve the sourcemaps from the pre-merged streams? loadmaps being set to true doesn't seem to be working.

Also, as a sanity check, would my approach be considered sensible? Am I missing some insanely easier way of achieving my desired result?

Recommended topics

Hot tags