在gulp-usemin中重写/重写连接的css文件中的相对路径

Question

我有这些要求:

1. 连接css文件.
2. 修改连接的css文件.
3. 由css文件(图像,字体等)引用的Rev资源文件.文件引用是相对的,来自第三方,所以我无法控制它们.
4. 重写css文件中的文件引用以进行加速,并使它们相对于连接文件而不是原始文件.

我的项目布局:

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

因此,作为一个例子,bootstrap.css使用相对路径引用glyphicons-halflings-regular.ttf:'../../ fonts/glyphicons-halflings-regular.ttf'.这需要重写为相对路径'bower_components/bootstrap/fonts/glyphicons-halflings-regular-hash.ttf'.

我已经能够得到一个gulp-usemin任务工作,连接我的CSS文件并转动输出.它甚至适用于源地图,这是一个奖励(不是必需的).

但是,我无法让usemin重写css文件中的路径来调整转速并使它们相对于连接文件.我该怎么做呢？我在css链中需要另一个插件吗？这是我到目前为止:

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

这是index.html中的usemin部分:

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