schluck: ugify und sourcemaps

Question

Ich benutze Schluck.

Ich hätte gerne eine oder mehrere JS-Dateien (sagen wir jQuery), um sie in einem zu kombinieren, zu minimieren und in einen Distributionsordner zu schreiben. Diese

ist, wie ich es tun:

minifyJS(['/js/myModule.file1.js', 
      '/js/myModule.file2.js'], '/dist/js', 'myModule') 

die Funktion:

function minifyJS(sourceFiles, destinationFolder, filenameRoot) { 
    return gulp.src(sourceFiles) 
     .pipe(plumber()) 

     // .pipe(sourcemaps.init()) here ??? 
     .pipe(concat(filenameRoot + '.js')) 
     .pipe(sourcemaps.init()) // or here ??? 

     .pipe(gulp.dest(destinationFolder)) // save .js 
     .pipe(uglify({ preserveComments: 'license' })) 
     .pipe(rename({ extname: '.min.js' })) 
     .pipe(gulp.dest(destinationFolder)) // save .min.js 
     .pipe(sourcemaps.write('maps')) 
     .pipe(gulp.dest(destinationFolder)) // save .map 
} 

Was bin ich mir nicht ganz sicher ist die sourcemaps.init() Lage ...

Sollte ich mehrere erstellen (2 in meinem Fall) Kartendateien (das wäre schön, wenn von Browsern unterstützt wird) oder nur eine (/maps/myModule.map)?

Answer 1

So funktioniert Quellkarten in Gulp: Jedes Element, das Sie über gulp.src auswählen, wird in ein virtuelles Dateiobjekt, bestehend aus dem Inhalt eines Buffers, sowie dem ursprünglichen Dateinamen übertragen. Diese werden durch Ihren Stream geleitet, wo der Inhalt umgewandelt wird.

Wenn Sie Quellkarten hinzufügen, fügen Sie diesen virtuellen Dateiobjekten, nämlich der Quellkarte, eine weitere Eigenschaft hinzu. Mit jeder Transformation wird auch die Quellkarte transformiert. Wenn Sie also die Quellkarten nach concat und vor dem Uglify initialisieren, speichern die Quellkarten die Transformationen aus diesem bestimmten Schritt. Die Quellkarte "denkt", dass die Originaldateien die Ausgabe von concat sind, und der einzige Transformationsschritt, der stattgefunden hat, ist der Uglify-Schritt. Wenn Sie sie in Ihrem Browser öffnen, wird nichts passen.

Es ist besser, dass Sie Quellkarten direkt nach dem Globbing platzieren und sie direkt speichern, bevor Sie Ihre Ergebnisse speichern. Gulp-Quellkarten interpolieren zwischen den Transformationen, so dass Sie jede Änderung im Auge behalten, die passiert ist. Die ursprünglichen Quelldateien sind diejenigen, die Sie ausgewählt haben, und die Quellkarte wird zu diesen Ursprüngen zurückverfolgt.

Dies ist Ihr Strom:

return gulp.src(sourceFiles) 
    .pipe(sourcemaps.init()) 
    .pipe(plumber()) 
    .pipe(concat(filenameRoot + '.js')) 
    .pipe(gulp.dest(destinationFolder)) // save .js 
    .pipe(uglify({ preserveComments: 'license' })) 
    .pipe(rename({ extname: '.min.js' })) 
    .pipe(sourcemaps.write('maps')) 
    .pipe(gulp.dest(destinationFolder)) // save .min.js 

sourcemaps.write nicht wirklich sourcemaps schreiben, es sagt nur Gulp sie in eine physische Datei materialisieren, wenn Sie gulp.dest nennen.

Die gleiche sourcemap Plugin 4 nativ in Gulp aufgenommen werden: http://fettblog.eu/gulp-4-sourcemaps/ - Wenn Sie mehr Details haben wollen, wie sourcemaps mit Gulp intern arbeiten, sie sind in Kapitel 6 meiner Gulp Buch: http://www.manning.com/baumgartner