gulp concat JS libraries CSS

Question

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?

check concatcss configuration

Emeka Mbah
– Emeka Mbah

2015-08-12 09:57:01 +00:00
Commented Aug 12, 2015 at 9:57 — Emeka Mbah
– Emeka Mbah, Commented Aug 12, 2015 at 9:57

Emeka Mbah · Accepted Answer · 2015-08-12 10:42:13Z

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.

edited Aug 12, 2015 at 10:42

answered Aug 12, 2015 at 10:00

Emeka Mbah

17.7k11 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1995781 Over a year ago

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.

Emeka Mbah Over a year ago

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?

user1995781 Over a year ago

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.

Emeka Mbah Over a year ago

please see this, stackoverflow.com/questions/18369036/…, you might need to move the fonts folder

user1995781 Over a year ago

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.

Oliver Kötter · Accepted Answer · 2016-02-11 10:34:01Z

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

answered Feb 11, 2016 at 10:34

Oliver Kötter

1,00611 silver badges30 bronze badges

1 Comment

Oliver Kötter Over a year ago

and of course for this to work leave rebaseUrls true, which is the default.

Collectives™ on Stack Overflow

gulp concat JS libraries CSS

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related