Question

我有这些要求：

连接css文件。
修改连接的css文件。
由css文件（图像，字体等）引用的Rev资源文件。文件引用是相对的，来自第三方，因此我无法控制它们。
重写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：＆＃39; ../../ fonts / glyphicons-halflings-regular.ttf＆＃39;。这需要重写为相对路径＆＃b; bower_components / bootstrap / fonts / glyphicons-halflings-regular-hash.ttf＆＃39;。

我已经能够获得一个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 -->

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

0 个答案: