Búsqueda de sitios web

javascript - Gulp: Generar mapas de origen para scripts minificados y no minificados

Soy nuevo en gulp y me he encontrado con un problema que probablemente sea un escenario bastante común. Lo que estoy intentando hacer es compilar TypeScript en JavaScript, crear un mapa de origen para ello y luego ejecutar uglify. Me gustaría tener un mapa de origen tanto para el JS uglificado como para el no uglificado.

Lo que estoy tratando de 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 de gulp:

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 puedes 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)

Omitir la primera de las llamadas a sourcemap.write() dará como resultado un sourcemap correcto para la versión minificada del archivo.

¿Alguna idea de cómo solucionar esto?

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

Respuesta #1

El problema es que después del primer .pipe(sourcemaps.write('.')) tienes dos archivos en tu flujo:

framework.js
framework.js.map

Escribes esos dos archivos en el sistema de archivos (lo cual está bien), pero luego intentas ejecutar uglify() en ambos. Dado que tu archivo framework.js.map no es un archivo JavaScript y no contiene código JavaScript válido, el plugin uglify() falla.

Después de que hayas escrito framework.js.map en el sistema de archivos, realmente no hay razón para mantener ese archivo en el flujo. El objeto de archivo vinyl para framework.js todavía tiene una propiedad .sourceMap que contiene todas las transformaciones hasta ahora, lo que significa que puedes simplemente eliminar el archivo framework.js.map del flujo.

El plugin gulp-filter te permite hacer justamente 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 el flujo y uglify() ya no fallará.

Artículos relacionados