gulp: uglify and sourcemaps

Question

Sto usando il gulp.

Mi piacerebbe avere uno o più file JS (ad esempio jQuery) per unirli in uno, ridimensionarlo e scriverlo in una cartella di distribuzione.

Questo è come lo faccio:

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

la funzione:

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 
} 

Quello che non sono sicuro circa è il multiplo sourcemaps.init() posizione ...

Devo creare (2 nel mio caso) file di mappe (che sarebbe bello se supportato dai browser) o solo uno (/maps/myModule.map)?

Answer 1

Ecco come funzionano le sourcemaps in Gulp: ogni elemento selezionato tramite gulp.src viene trasferito in un oggetto file virtuale, costituito dai contenuti in un buffer, nonché dal nome del file originale. Questi vengono convogliati attraverso il tuo stream, dove i contenuti vengono trasformati.

Se aggiungi sourcemaps, aggiungi un'altra proprietà a quegli oggetti file virtuali, ovvero la mappa sourc. Ad ogni trasformazione, anche la mappa sourc si trasforma. Quindi, se si inizializzano le sourcemaps dopo concat e prima di uglify, le sourcemaps memorizzano le trasformazioni da quel particolare passaggio. La mappa del sourc "pensa" che i file originali siano l'output di concat, e l'unico passaggio di trasformazione che ha avuto luogo è il passo più brutto. Quindi quando li apri nel tuo browser, nulla si abbina.

È meglio posizionare direttamente i datasource dopo il globbing e salvarli direttamente prima di salvare i risultati. Gulp sourcemaps interpolerà tra le trasformazioni, in modo da tenere traccia di ogni modifica che si è verificata. I file di origine originali saranno quelli che hai selezionato, e la mappa di sourc si ricondurrà a quelle origini.

Questo è il tuo stream:

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 in realtà non scrivere sourcemaps, semplicemente dice Gulp loro concretizzarsi in un file fisico quando si chiama gulp.dest.

Lo stesso plug-in Sourcemap sarà incluso nel Gulp 4 nativamente: http://fettblog.eu/gulp-4-sourcemaps/ - Se si desidera avere maggiori dettagli su come sourcemaps lavorano internamente con Gulp, sono nel capitolo 6 del mio libro Gulp: http://www.manning.com/baumgartner