gulp avec moins: exécutez moins, concattez et réduisez le nombre de css avec les sourcemaps?

Question

J'essaye de faire un fichier css qui est minifié, mais qui contient une carte source au cas où je devrais déboguer sur la production ce qui arrive souvent. Cela ne marchera pas. Si j'utilise le code ci-dessous:

gulp.task('process:css', function() { 
return gulp.src([paths.css, paths.less, "!" + paths.minCss]) 
    .pipe(sourcemaps.init()) 
    .pipe(less()) 
    .pipe(concat(paths.concatCssDestMin)) 
    .pipe(cleanCss()) 
    .pipe(sourcemaps.write(".")) 
    .pipe(gulp.dest(".")); 

}); Tout le processus fonctionne et tout est généré, le min.css final est correct et fonctionne, mais la carte source est bonkers, le débogage dans le navigateur prétend que toutes les références de style proviennent de la ligne 1 ou 2 de la source du premier fichier de référence. la carte source:

Cependant, si je retire la cssmin() du processus et de l'exécuter, tout fonctionne, y compris les cartes de source. Les cartes sources référencent les fichiers originaux malgré que je les concilie tous en un seul.

Qu'est-ce que je fais mal? Comment puis-je atteindre cet objectif?

EDIT: Comme par vegasje des conseils, j'utilisais le mauvais plug-in, mais lors du passage de mincss à CleanCSS, je ne peux toujours pas obtenir le fichier min.css unique à la carte pour les fichiers d'origine. Il fait référence uniquement le fichier concatted:

{"version":3,"sources":["wwwroot/css/site.min.css"],"names":[],"mappings":..."

Cependant, encore une fois Si je supprime la commande CleanCSS(). La carte source semble fonctionner et semble correcte:

{"version":3,"sources":["bootstrap.custom.css","kendo.custom.css","kendobootstrapfix.css","main.css","yamm.css","theme.less"],"names":[],"mappings":"A.... 

Cependant, il n'est pas minifié.

Answer 1

cssmin ne prend pas en charge les compositions de gulp-sourcemaps. Voir ici la liste soutenue:

https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support

Le plugin que vous voulez est gulp-clean-css.

Modifier: Vous pouvez également essayer le pipeline ci-dessous. Il n'est pas idéal, car il minifies avant concat-ment le css, mais il peut surmonter vos problèmes:

gulp.task('process:css', function() { 
    return gulp.src([paths.css, paths.less, "!" + paths.minCss]) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(cleanCss()) 
     .pipe(concat(paths.concatCssDestMin)) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(".")); 
});