Comment définir la base appropriée pour les fichiers d'entrée pour gulp-concat-css?

Question

J'utilise gulp-concat-css pour combiner une liste de CSS sélectionnée en une seule. Mon dossier la structure ressemble projet ceci:

[]Project Folder 
gulpfile.js 
---[]public 
------[]assets 
---------[]libs (All bower install libraries such as bootstrap will be placed here) 
---------[]css (All my custom CSS including the combined CSS will be placed here) 

Maintenant, ma tâche engouffreur ressembler à quelque chose comme ceci:

gulp.task('concatcss', function() { 
    return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css', 
    'public/assets/libs/angular-motion/dist/angular-motion.min.css', 
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css', 
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css', 
    'public/assets/css/mycustom.css']) 
    .pipe(concatCss("css/all.css").on('error', standardHandler)) 
    .pipe(minifyCss().on('error', standardHandler)) 
    .pipe(gulp.dest('public/assets')); 
}); 

Le problème est la sortie finale venir avec la mauvaise URL rebasage. Cela provoque l'URL CSS pointe vers le mauvais chemin de fichiers. Par exemple, l'URL d'origine à partir du bootstrap.min.css est url('../fonts/glyphicons-halflings-regular.woff'). Maintenant, les CSS combinés viennent avec l'URL de url(../../fonts/glyphicons-halflings-regular.woff), ce qui est faux. Selon la documentation de gulp-concat-css, "pour une importation et un rebas d'importation corrects, assurez-vous de définir la base appropriée pour les fichiers d'entrée".

Comment puis-je définir la base appropriée pour les fichiers d'entrée pour obtenir le bon rebas url?

Answer 1

Vous devez définir la base comme option dans gulp.src comme celui-ci { base: 'public/assets' }:

gulp.task('concatcss', function() { 
    return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css', 
    'public/assets/libs/angular-motion/dist/angular-motion.min.css', 
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css', 
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css', 
    'public/assets/css/mycustom.css'], { base: 'public/assets' }) 
    .pipe(concatCss("css/all.css").on('error', standardHandler)) 
    .pipe(minifyCss().on('error', standardHandler)) 
    .pipe(gulp.dest('public/assets')); 
});