gulp: uglify et sourcemaps
J'utilise gulp.
Je voudrais avoir un ou plusieurs fichiers JS (disons jQuery) pour les combiner en un seul, le réduire et l'écrire dans un dossier de distribution.
Voici comment je le fais:
minifyJS(['/js/myModule.file1.js',
'/js/myModule.file2.js'], '/dist/js', 'myModule')
La fonction:
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
}
Ce dont je ne suis pas sûr, c'est de l'emplacement sourcemaps.init()...
Devrais-je créer plusieurs (2 dans mon cas) fichiers de carte (ce serait bien si c'est pris en charge par les navigateurs) ou un seul ( / maps / myModule.carte)?
1 réponses
Voici donc comment fonctionne sourcemaps dans Gulp: chaque élément que vous sélectionnez via gulp.src est transféré dans un objet de fichier virtuel, composé du contenu dans un tampon, ainsi que du nom de fichier d'origine. Ceux - ci sont canalisés à travers votre flux, où le contenu se transforme.
Si vous ajoutez sourcemaps, vous ajoutez une propriété supplémentaire à ces objets de fichiers virtuels, à savoir le sourcemap. Avec chaque transformation, le sourcemap est également transformé. Donc, si vous initialisez les sourcemaps après concat et avant uglify, les sourcemaps stockent les transformations de cette étape particulière. Le sourcemap "pense" que les fichiers d'origine sont la sortie de concat, et la seule étape de transformation qui a eu lieu est l'étape uglify. Donc, lorsque vous les ouvrez dans votre navigateur, rien ne correspondra.
Il est préférable de placer les sourcemaps directement après globbing, et de les enregistrer directement avant d'enregistrer vos résultats. Gulp sourcemaps interpolera entre les transformations, de sorte que vous Gardez une trace de chaque changement qui s'est produit . Les fichiers source d'origine seront ceux que vous avez sélectionnés, et le sourcemap fera le suivi de ces origines.
Ceci est votre flux:
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 n'écrit pas réellement sourcemaps, il dit simplement à Gulp de les matérialiser dans un fichier physique lorsque vous appelez gulp.dest.
Le même plugin sourcemap sera inclus dans Gulp 4 nativement: http://fettblog.eu/gulp-4-sourcemaps/ -- Si vous voulez avoir plus de détails sur comment sourcemaps fonctionnent en interne avec Gulp, ils sont dans le Chapitre 6 de mon livre Gulp: http://www.manning.com/baumgartner