mariocasciaro / gulp-concat-css

Concatenates css files, bubbling up import statements (as per the standard), and optionally rebasing urls and inlining local import statements.
MIT License
78 stars 19 forks source link

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

Closed NgYueHong closed 9 years ago

NgYueHong commented 9 years ago

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?

mariocasciaro commented 9 years ago
gulp.src([...your assets...], {base: 'public/assets'})
NgYueHong commented 9 years ago

Thanks a lot for your help. It seems working now.

IAfanasov commented 7 years ago

Just spend several hours to figure out that base: 'public/assets' doesn't work for me. For some reason I should provide full path.

gulp.src([...your assets...], {base: 'c:/sources/repo/public/assets'})