6

我有这些要求：

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

我的项目布局：

  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 文件中的路径以调整 revving 并使它们相对于连接文件。我该怎么做呢？我需要 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 -->
4

0 回答 0