node.js - sourcemap - install gulp

¿Cómo recupera gulp-sourcemaps** la ruta coincidente del método src?

Question

Estoy usando gulp para crear proyectos, junto con gulp-sourcemaps para generar mapas de origen.

Tengo varios recopiladores como este:

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

Me gustaría construirlos en la siguiente sección:

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/

Actualmente mi tarea trago puede generar archivos en la ruta correcta:

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

pero hay dos problemas:

1. sourceRoot en el archivo del mapa no es correcto: se espera "sourceRoot":"/src/comp1/" pero el resultado es "sourceRoot":"/src/"

2. tampoco lo hace sourceMappingURL en el archivo comprimido: esperando sourceMappingURL=c1-a.min.js.map pero el resultado es sourceMappingURL=../../comp1/c1-a.min.js.map

¿Cómo puedo agregar ** parte a sourceRoot y corregir sourceMappingURL?

Answer 1

Tu sourceRoot se establece como /src/ porque eso es lo que dijiste aquí:

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

Has establecido {base: ''./public/src''} para que todo en la línea trate las rutas relativas a src , de modo que ese sea el origen sourceRoot correcto. Pero en la parte superior del mapeo, debe tener rutas relativas a las de la parte "sources":[...] (por ejemplo, "sources":["comp1/c1-a.min.js.map"] ).

Sin embargo, si realmente desea cambiar el sourceRoot, puede hacerlo utilizando la opción sourceRoot para gulp-sourcemaps , pero sus sources podrían estar equivocados. Sin embargo, gulp-sourcemaps versión 2.0.0-alpha (que tendrías que solicitar explícitamente en tu package.json ya que es una presentación preliminar) también tiene una opción mapSources que te permite modificar esos también.

De manera similar, puede usar sourceMappingURLPrefix o sourceMappingURL para alterar sourceMappingURL. En este último caso, obtendrás el objeto de file completo, para que puedas inspeccionar, por cwd , cwd , base , etc. ¡ console.debug o Visual Studio Code pueden ser de gran ayuda al depurar tareas de npm / gulp! Ese artículo muestra cómo establecer puntos de interrupción, inspeccionar variables, etc., que he encontrado muy útil.