Wie gulp-sourceimaps ** gefundenen Pfad von src Methode

Question

Ich benutze Schluck um Projekt zu erstellen, zusammen mit Schluck-sourcemaps für die Erstellung von Quellkarten.

Ich habe mehrere compnents wie folgt aus:

public 
|-- src 
     |-- comp1 
     |  |-- c1-a.js 
     |  |-- c1-b.js 
     | 
     |-- comp2 
      |-- c2-a.js 
      |-- c2-b.js 

Ich möchte sie in folgenden strcture bauen:

public 
|-- dist 
| |-- comp1 
| |  |-- c1-a.min.js 
| |  |-- c1-a.min.js.map 
| |  |-- c1-b.min.js 
| |  |-- c1-b.min.js.map 
| | 
| |-- comp2 
|   |-- c2-a.min.js 
|   |-- c2-a.min.js.map 
|   |-- c2-b.min.js 
|   |-- c2-a.min.js.map 
| 
|-- src/ 

Derzeit meine schluck Aufgabe Dateien in richtigen Pfad generieren:

gulp.task('component', function() { 
    gulp.src('./public/src/**/*.js', {base: './public/src'}) 
    .pipe(sourcemaps.init()) 
    .pipe(uglify()) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(sourcemaps.write('.', { 
     includeContent: false, 
     sourceRoot: '/src/' // here's the problem 
    })) 
    .pipe(gulp.dest('./public/dist')) 
}) 

aber es gibt zwei Probleme:

1. die sourceRoot in Map-Datei ist nicht korrekt: erwarten "sourceRoot":"/src/comp1/" aber das Ergebnis ist "sourceRoot":"/src/"

2. auch nicht sourceMappingURL in komprimierte Datei: erwarten sourceMappingURL=c1-a.min.js.map aber das Ergebnis ist sourceMappingURL=../../comp1/c1-a.min.js.map

Wie kann ich den ** Teil an sourceRoot anhängen und sourceMappingURL fixieren?

Answer 1

Ihre sourceRoot wird immer als /src/ gesetzt, weil das ist, was Sie es gesagt hier:

gulp.src('./public/src/**/*.js', {base: './public/src'}) 

Sie {base: './public/src'} eingestellt haben so alles auf der ganzen Linie wird Pfade relativ zu src behandeln, so dass die richtige sourceRoot ist . Aber an der Spitze des Mappings sollte es Pfade relativ zu denen im "sources":[...]-Teil haben (z. B. "sources":["comp1/c1-a.min.js.map"]).

Trotzdem, wenn Sie wirklich die SourceRoot ändern wollten, können Sie dies mit der sourceRoot option to gulp-sourcemaps tun, aber dann wäre Ihre sources falsch. Allerdings, gulp-sourcemaps Version 2.0.0-alpha (die Sie explizit in Ihrem package.json seit der Vorabversion anfordern müssen) hat auch eine mapSources Option, damit Sie diese auch ändern können.

In ähnlicher Weise können Sie oder sourceMappingURL verwenden, um die sourceMappingURL zu ändern. Im letzteren Fall erhalten Sie das vollständige file Objekt, so dass Sie z. cwd, base, etc. console.debug oder Visual Studio-Code kann be a big help beim Debug npm/Schluck Aufgaben! Dieser Artikel zeigt, wie man Haltepunkte setzt, Variablen überprüft usw., was ich sehr nützlich fand.