Gulp.js - Rewrite urls embedded in css while concatenating

Question

I'm using Gulp to concatenate several css files from different directories (Bower managed dependencies). Font-awesome is one of these dependencies and it contains a relative reference to its fonts url(../font....). When the css file is concatenated and placed in a different directory this relative url will obviously be wrong. Is there a best practice for dealing with this?

Answer 1

You can use gulp-replace. https://npmjs.org/package/gulp-replace

**gulp-replace can be called with a string or regex.**

*replace(string, replacement)*

string

Type: String

The string to search for replacement

Type: String

The replacement string.

*replace(regex, replace)*

Note: gulp-replace cannot perform regex replacement on streams.

regex

Type: RegExp

You could also use gulp-frep

Answer 2

Another option is gulp-css-rebase-urls which was built to address this problem.

https://www.npmjs.com/package/gulp-css-rebase-urls