javascript - reescribiendo/revisando rutas relativas en archivos css concatenados dentro de gulp-usemin

Question

Tengo estos requisitos:

1. Concatenar archivos css.
2. Rev el archivo css concatenado.
3. Rev recursos de archivos referenciados por archivos css (imágenes, fuentes, etc.). Las referencias de archivo son relativas y provienen de terceros, por lo que no tengo control sobre ellas.
4. Vuelva a escribir referencias de archivos en css para acelerar y hacer que sean relativos al archivo concatenado, en lugar del archivo original.

El diseño de mi proyecto:

  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...

Entonces, como ejemplo, bootstrap.css hace referencia a glyphicons-halflings-regular.ttf usando la ruta relativa: ''../../fonts/glyphicons-halflings-regular.ttf''. Esto necesita ser reescrito a la ruta relativa ''bower_components / bootstrap / fonts / glyphicons-halflings-regular-hash.ttf''.

Pude hacer funcionar una tarea de gulp-usemin que concatena mis archivos css y revoluciona la salida. Incluso funciona con mapas fuente, que es una bonificación (no es obligatorio).

Sin embargo, no puedo hacer que usemin reescriba las rutas en los archivos css para ajustar las revoluciones y hacerlas relativas al archivo concatenado. ¿Cómo hago esto? ¿Necesito otro complemento en la cadena CSS? Esto es lo que tengo hasta ahora:

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

Aquí está la sección usemin en index.html:

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