Speichern von Quellmaps beim Zusammenführen von JS-Streams (um lib-Abhängigkeiten mit browserify zu bündeln)

Question

In meinem aktuellen Workflow muss ich browserify-Bundles erstellen, aber auch nicht-commonjs js-Bibliotheken am Anfang der Datei concattieren, um globale Variablen aber freizulegen Reduzieren Sie auch die Anzahl der HTTP-Anfragen und die Größe der js-Dateien. (Einige dieser Bibliotheken können auch von anderen Bundles benötigt werden)

Ich habe derzeit einen Schluck-Task, der das browserify-Paket erstellt und alle erforderlichen Bibliotheken am Anfang der Ausgabedatei aufruft, aber das finde ich an dem Punkt die Ströme zu verschmelzen, brechen meine Quellkarten und im Web Inspector; Die resultierende Karte zeigt nur das vorexistierte browserify-Bundle und nicht die einzelnen js-Module.

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); 
}); 

(beachten Sie, dass meine Aufgabe eine Config-json Array liest auch mehrere Bündel zu bauen, wenn mehr als eine vorhanden ist)

Gibt es eine Möglichkeit ich die sourcemaps aus den vorge vereinigten Ströme bewahren können? Loadmaps, die auf True festgelegt sind, scheint nicht zu funktionieren.

Auch, als eine Vernunftprüfung, würde mein Ansatz als sinnvoll angesehen werden? Fehle ich etwas wahnsinnig einfacher Weg, um mein gewünschtes Ergebnis zu erreichen?

Answer 1

Stellen Sie sicher, dass die folgende Zeile am Anfang der Pipe steht. Dies sollte die Quellkarten korrekt speichern. siehe

.pipe(gulpif(env !== "production", sourcemaps.init()))