web-dev-qa-db-fra.com

gulp: uglify et les cartes source

J'utilise gulp.

J'aimerais disposer d'un ou de plusieurs fichiers JS (par exemple, jQuery) pour les combiner en un, 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 l'emplacement sourcemaps.init() ...

Devrais-je créer plusieurs fichiers de carte (2 dans mon cas) (ce qui serait bien si Nice est pris en charge par les navigateurs) ou un seul (/ maps/myModule.map)?

javascriptmappinggulpgulp-sourcemaps
45
Serge

Voici comment fonctionnent les cartes source dans Gulp: Chaque élément sélectionné via gulp.src est transféré dans un objet de fichier virtuel, composé du contenu d’un tampon, ainsi que du nom du fichier original. Celles-ci sont acheminées dans votre flux, où le contenu est transformé.

Si vous ajoutez des cartes de source, vous ajoutez une propriété supplémentaire à ces objets de fichier virtuel, à savoir le plan-source. À chaque transformation, le sourcemap est également transformé. Ainsi, si vous initialisez les cartes source après la concaténation et avant la conversion, les cartes source stockent les transformations de cette étape particulière. Le sourcemap "pense" que les fichiers originaux sont la sortie de concat, et que la seule étape de transformation qui a eu lieu est l'étape d'abaissement. Ainsi, lorsque vous les ouvrez dans votre navigateur, rien ne correspondra.

Il est préférable de placer les cartes source directement après la création de la carte et de les enregistrer directement avant d’enregistrer vos résultats. Les cartes d'origine de Gulp interpolent entre les transformations, afin que vous gardiez une trace de chaque changement survenu . Les fichiers source originaux seront ceux que vous avez sélectionnés et le sourcemap fera le suivi avec 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 de cartes source, il demande simplement à Gulp de les matérialiser dans un fichier physique lorsque vous appelez gulp.dest.

Le même plugin sourcemap sera inclus nativement dans Gulp 4: http://fettblog.eu/gulp-4-sourcemaps/ - Si vous voulez avoir plus de détails sur la manière dont les cartes de source fonctionnent en interne avec Gulp , ils figurent au chapitre 6 de mon livre Gulp: http://www.manning.com/baumgartner

99
ddprrt