webentwicklung-frage-antwort-db.com.de

schlucken: hässlich machen und sourcemaps

Ich benutze Schluck.

Ich möchte eine oder mehrere JS-Dateien (z. B. jQuery) haben, um sie in einer zu kombinieren, zu verkleinern und in einen Distributionsordner zu schreiben.

So mache ich es:

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 ich nicht sicher bin, ist die sourcemaps.init() Position ...

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

45
Serge

So funktionieren Quellkarten in Gulp: Jedes Element, das Sie mit gulp.src Auswählen, wird in ein virtuelles Dateiobjekt übertragen, das aus dem Inhalt eines Puffers sowie dem ursprünglichen Dateinamen besteht. Diese werden durch Ihren Stream geleitet, wo der Inhalt umgewandelt wird.

Wenn Sie Quellzuordnungen hinzufügen, fügen Sie diesen virtuellen Dateiobjekten eine weitere Eigenschaft hinzu, nämlich die Quellzuordnung. Mit jeder Transformation wird auch die Quellkarte transformiert. Wenn Sie also die Sourcemaps nach concat und vor uglify initialisieren, werden in den Sourcemaps die Transformationen dieses bestimmten Schritts gespeichert. 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, stimmt also nichts überein.

Es ist besser, Sie platzieren Sourcemaps direkt nach dem Globbing und speichern sie direkt, bevor Sie Ihre Ergebnisse speichern. Gulp-Sourcemaps interpolieren zwischen Transformationen, sodass Sie jede Änderung verfolgen können . Die ursprünglichen Quelldateien sind diejenigen, die Sie ausgewählt haben, und die Quellkarte wird zu diesen Ursprüngen zurückverfolgt.

Dies ist dein Stream:

 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 Schreibt eigentlich keine Sourcemaps, sondern weist Gulp an, diese beim Aufruf von gulp.dest In einer physischen Datei zu materialisieren.

Das gleiche Sourcemap-Plugin wird nativ in Gulp 4 enthalten sein: http://fettblog.eu/gulp-4-sourcemaps/ - Wenn Sie weitere Informationen zur internen Funktionsweise von Sourcemaps in Gulp benötigen , sie befinden sich in Kapitel 6 meines Gulp-Buches: http://www.manning.com/baumgartner

99
ddprrt