How to set proper base for the input files for gulp-concat-css?

Question

I am using gulp-concat-css to combine a selected list of CSS into one. My project folder structure look like this:

[]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)

Now, my gulp task look something like this:

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'));
});

The problem is the final output come with the wrong url rebase. This cause the CSS URL is pointing to the wrong path of files. For example, the original URL from the bootstrap.min.css is url('../fonts/glyphicons-halflings-regular.woff'). Now, the combined CSS come with the URL of url(../../fonts/glyphicons-halflings-regular.woff), which is wrong. It should be url(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)

According to gulp-concat-css documentation, it says "for a proper import inlining and url rebase, make sure you set the proper base for the input files".

How can I set the proper base for the input files to get the correct url rebase?

Answer 1

You have to set the base as option in gulp.src like this { 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'));
});