0

I am using gulp concat to combine all JavaScript libraries CSS file into one. My gulp task looks something like this:

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css')
    .pipe(concatCss("all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});

It does work to combine all CSS into one. However, the problem is as the path is changed, any CSS linked file such as url("../fonts/glyphicons-halflings-regular.woff") will fail to load.

How can I overcome the issue? Is there anyway for it to automatically change the path based on the new output CSS file location?

user1995781
  • 19,085
  • 45
  • 135
  • 236

2 Answers2

2

You need to set concatcss options rebaseUrls to false, its true by default

rebaseUrls: (default true) Adjust any relative URL to the location of the target file.

Example:

concatCss(targetFile, {rebaseUrls:false})

In your own case:

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css')
    .pipe(concatCss("all.css", {rebaseUrls:false}).on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});

Other Options (since 2.1.0)

inlineImports: (default true) Inline any local import statement found
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
includePaths: (default []) Include additional paths when inlining imports

NB: for a proper import inlining and url rebase, make sure you set the proper base for the input files.

Emeka Mbah
  • 16,745
  • 10
  • 77
  • 96
  • Thanks a lot for your answer. I have tried, but it doesn't seems solving the issue. The url still showing the same `url("../fonts/glyphicons-halflings-regular.woff")`, which is wrong path from concat css file. – user1995781 Aug 12 '15 at 10:17
  • is this the url in the css before concat? `../fonts/glyphicons-halflings-regular.woff` ? in your web root do you have example index.html, /fonts - directory ? does the `fonts` folder exists in your project root? – Emeka Mbah Aug 12 '15 at 10:20
  • Yes, `glyphicons-halflings-regular.woff` is in the css before concat. Actually that one is from bootstrap.min.css. Before concat, I was able to load the icon. After concat, it fail to load. – user1995781 Aug 12 '15 at 10:44
  • please see this, http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-are-not-working, you might need to move the `fonts` folder – Emeka Mbah Aug 12 '15 at 10:53
  • The path is correct from the original bootstrap css file and I have no problem loading it before I concat all css files into one. – user1995781 Aug 12 '15 at 14:51
1

You have to add the base option to gulp.src like this: { base: 'dist' }

Your code reworked:

gulp.task('concatcss', function() {
  return gulp.src('assets/libs/**/*.css', { base: 'dist'})
    .pipe(concatCss("all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});
Oliver Kötter
  • 1,006
  • 11
  • 29