javascript - multiple - gulp uglify es6

Gulp: Genera mapas de origen para scripts minificados y no minificados

Question

Soy nuevo en tragar y me he encontrado con un problema que probablemente sea un escenario bastante común. Lo que intento hacer es compilar un texto mecanografiado en javascript, crear un mapa fuente para él y luego ejecutar uglify. Me gustaría tener un mapa de origen para js ugliyfied así como para js no uglified.

Lo que intento lograr es la siguiente estructura de archivos:

framework.js
framework.js.map < this won''t work
framework.min.js
framework.min.js.map

Esta es mi tarea trago:

var gulp = require(''gulp''),
uglify = require(''gulp-uglify'')
ts = require("gulp-typescript")
sourcemaps = require(''gulp-sourcemaps'')
rename = require(''gulp-rename'');

var tsProject = ts.createProject("tsconfig.json");


gulp.task(''typescript'', function(){
    tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject()).js
    .pipe(sourcemaps.write(''.'')) // Write sourcemap for non-minified version
    .pipe(gulp.dest("dist"))
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:''.min''}))
    .pipe(sourcemaps.write(''.'')) // Write sourcemap for minified version.
    .pipe(gulp.dest("dist"));
});

gulp.task(''default'', [''typescript'']);

Como puede ver, estoy ejecutando sourcemaps.write () dos veces para obtener los dos archivos diferentes. Esto me da un error

tream.js:74                                                                        
  throw er; // Unhandled stream error in pipe.                                  
  ^ GulpUglifyError: unable to minify JavaScript                                       
at createError     (C:/Users/alexa/Dropbox/code/Web/mhadmin/framework/node_modules/gulp-uglify/lib/create-error.js:6:14)

Salir de la primera de las llamadas sourcemap.write () dará como resultado un mapa de origen correcto para la versión minimizada del archivo.

Alguna idea de cómo solucionar este problema?

EDITAR: Esto no es exactamente un duplicado de gulp: uglify y sourcemaps, ya que necesito escribir múltiples mapas de origen con múltiples llamadas a gulp.dest ()

Answer 1

Parece una especie de truco, pero funciona

gulp.src(''TypeScript/Test.ts'')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(ts(tsOptions)).js
    .pipe(sourcemaps.write(''.''))
    .pipe(gulp.dest(''./wwwroot/test''))
    .pipe(uglify())
    .pipe(rename({ extname: ''.min.js'' }))
    .pipe(sourcemaps.write(''.''))
    .pipe(gulp.dest(''./wwwroot/test''));

La magia está en el plumber . Fontanero evita detener el proceso en la excepción. Pero el interés principal por qué ocurre una excepción. Entonces, está bastante claro. En su código, crea el mapa de origen a través de .pipe(sourcemaps.write(''.'')) // Write sourcemap for non-minified version y luego trata de reutilizarlo. Y sí, el mapa de origen no es js, y ocurre una excepción. Con plumber esta excepción lo ignora y logra su objetivo.

Pero podría haber averiguado algo mal, te recomiendo que encuentres una solución más verdadera.

Answer 2

El problema es que después del primer .pipe(sourcemaps.write(''.'')) Tienes dos archivos en tu transmisión:

framework.js
framework.js.map 

Usted escribe esos dos archivos en el sistema de archivos (lo cual está bien), pero luego intenta ejecutar uglify() en ambos. Como su archivo framework.js.map no es un archivo JavaScript y no contiene un código JavaScript válido, el plugin uglify() lanza.

Después de haber escrito framework.js.map en el sistema de archivos, realmente no hay razón para mantener ese archivo en la transmisión. El objeto de archivo vinyl para framework.js todavía tiene una propiedad .sourceMap que lleva todas las transformaciones hasta el momento, lo que significa que puede simplemente eliminar el archivo framework.js.map de la transmisión.

El plugin gulp-filter permite hacer eso:

var filter = require(''gulp-filter'');

gulp.task(''typescript'', function(){
  return tsProject.src()
   .pipe(sourcemaps.init())
   .pipe(tsProject()).js
   .pipe(sourcemaps.write(''.''))
   .pipe(gulp.dest("dist"))
   .pipe(filter(''**/*.js'')) // only let JavaScript files through here
   .pipe(uglify())
   .pipe(rename({suffix:''.min''}))
   .pipe(sourcemaps.write(''.''))
   .pipe(gulp.dest("dist"));
});

Después de .pipe(filter(''**/*.js'')) solo el archivo framework.js estará en la transmisión y uglify() no volverá a aparecer.