Rewriting / changing relative paths in concatenated css files in gulp -usemin

Question

I have the following requirements:

• Concatenation of css files.
• Return the concatenated css file.
• Rev resource files referenced by css files (images, fonts, etc.). File links are relative and come from third parties, so I can’t control them.
• Rewrite the file links in the css files for revving and make them relative to the concatenated file, not the source file.

My project layout:

dist/ index.html app-<hash>.css bower_components/ bootstrap/ fonts/ glyphicons-halflings-regular-<hash>.woff glyphicons-halflings-regular-<hash>.ttf etc... app/ index.html appStyles.css bower_components/ bootstrap/ dist/ css/ bootstrap.css etc... fonts/ glyphicons-halflings-regular.woff glyphicons-halflings-regular.ttf etc... 

So, as an example, bootstrap.css refers to glyphicons-halflings-regular.ttf using the relative path: '../../fonts/glyphicons-halflings-regular.ttf'. This needs to be rewritten in the relative path "bower_components / bootstrap / fonts / glyphicons-halflings-regular-hash.ttf".

I managed to complete the gulp -usemin task, which merges my css files and displays the result. It even works with source cards, which is a bonus (not required).

However, I cannot get usemin to rewrite paths in css files to configure revving and make them relative to the concatenated file. How can I do it? Do I need another plugin in the css chain? Here is what I still have:

 var resourcesRevved = [ 'app/bower_components/bootstrap/**/*.ttf', 'app/bower_components/bootstrap/**/*.woff', etc... ]; gulp.task('copy:resources:revved', ['clean:dist'], function() { return gulp.src(resourcesRevved) .pipe(rev()) .pipe(gulp.dest('dist')); }); gulp.task('usemin', ['copy:resources:revved'], function() { return gulp.src('./app/index.html') .pipe(usemin({ css: [ sourcemaps.init({ loadMaps: true }), 'concat', rev(), sourcemaps.write('.') ] })) .pipe(gulp.dest('dist/')); }); 

Here is the usemin section in index.html:

 <!-- build.css app.css --> <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="app/appStyles.css"> etc... <!-- endbuild -->