javascript - sourcemaps - gulp-uglify

gulp: uglify y sourcemaps

Question

Estoy usando gulp.

Me gustaría tener uno o varios archivos JS (por ejemplo, jQuery) para combinarlos en uno, minimizarlos y escribirlos en una carpeta de distribución.

Así es como lo hago:

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

la función:

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
}

De lo que no estoy seguro es de la ubicación sourcemaps.init() ...

¿Debo crear múltiples (2 en mi caso) archivos de mapas (que sería bueno si es compatible con navegadores) o solo uno ( /maps/myModule.map )?

Answer 1

Así es como funcionan los mapas de origen en Gulp: cada elemento que seleccionas a través de gulp.src se transfiere a un objeto de archivo virtual, que consiste en los contenidos en un Buffer, así como el nombre del archivo original. Esos son canalizados a través de su flujo, donde los contenidos se transforman.

Si agrega mapas de origen, agrega una propiedad más a esos objetos de archivo virtual, es decir, el mapa de origen. Con cada transformación, el mapa fuente también se transforma. Por lo tanto, si inicializa los mapas de origen después de concat y antes de uglify, los sourcemaps almacenan las transformaciones de ese paso en particular. El mapa de origen "piensa" que los archivos originales son el resultado de concat, y el único paso de transformación que tuvo lugar es el paso de uglify. Entonces, cuando los abre en su navegador, nada coincidirá.

Es mejor que coloque los mapas de origen directamente después del engomado y guárdelos directamente antes de guardar los resultados. Los mapas de origen Gulp interpolarán entre transformaciones, para que pueda seguir cada cambio que haya sucedido . Los archivos de origen originales serán los que seleccionó, y el mapa de origen hará un seguimiento de esos orígenes.

Esta es tu corriente:

 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 realidad no escribe los mapas de origen, simplemente le dice a Gulp que los materialice en un archivo físico cuando llame a gulp.dest .

El mismo complemento de mapa fuente se incluirá en Gulp 4 de forma nativa: http://fettblog.eu/gulp-4-sourcemaps/ - Si desea obtener más detalles sobre cómo los mapas de origen funcionan internamente con Gulp, están en el Capítulo 6 de mi libro Gulp: http://www.manning.com/baumgartner