W jaki sposób gulp-sourcemaps pobiera ** dopasowaną ścieżkę z metody src

Question

Używam gulp do budowania projektu, razem z gulp-sourcemaps do generowania sourcemaps.

Mam kilka compnents tak:

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

Chciałbym zbudować je na poniższej strcture:

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/ 

Obecnie moim zadaniem łyk może generować pliki do prawidłowej ścieżce:

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

ale występują dwa problemy:

1. sourceRoot w pliku mapy nie jest poprawna: spodziewa "sourceRoot":"/src/comp1/" ale wynik jest "sourceRoot":"/src/"

2. ani nie sourceMappingURL w skompresowanym pliku: spodziewa sourceMappingURL=c1-a.min.js.map ale wynik jest sourceMappingURL=../../comp1/c1-a.min.js.map

Jak mogę dołączyć część ** do sourceRoot i naprawić sourceMappingURL?

Answer 1

Twój sourceRoot jest uzyskiwanie ustawiony jako /src/ bo to właśnie ją powiedziano tutaj:

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

Musisz ustawić {base: './public/src'} więc wszystko na dół linii będzie traktować ścieżek względnych do src, tak że jest poprawna sourceRoot . Ale na górze mapowania powinien on mieć ścieżki względne względem tych w części "sources":[...] (na przykład "sources":["comp1/c1-a.min.js.map"]).

Mimo to, jeśli naprawdę chciałeś zmienić sourceRoot, możesz to zrobić za pomocą sourceRoot option to gulp-sourcemaps, ale wtedy twój sources byłby niewłaściwy. Jednak wersja gulp-sourcemaps w wersji 2.0.0-alpha (którą musisz jawnie zażądać w swoim package.json, ponieważ jest w fazie wstępnej), ma również opcję mapSources, która pozwala również na modyfikację.

Podobnie można użyć sourceMappingURLPrefix lub sourceMappingURL, aby zmienić sourceMappingURL. W tym drugim przypadku uzyskasz pełny obiekt file, dzięki czemu możesz sprawdzić np. cwd, base, itp. console.debug lub Kod Visual Studio można be a big help podczas debugowania zadań npm/gulp! W tym artykule pokazano, jak ustawiać punkty przerwania, sprawdzać zmienne itp., Które uważam za bardzo przydatne.