Переписывание / сохранение относительных путей в сцепленных css-файлах внутри gulp-usemin

У меня есть эти требования:

  1. Конкатенация CSS-файлов.
  2. Пересмотрите составной файл CSS.
  3. Файлы ресурсов Rev, на которые ссылаются CSS-файлы (изображения, шрифты и т. Д.). Ссылки на файлы являются относительными и исходят от третьих лиц, поэтому я не могу их контролировать.
  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-reg.ttf, используя относительный путь: '../../fonts/glyphicons-halflings-regular.ttf'. Это должно быть переписано в относительный путь 'bower_components/bootstrap/fonts/glyphicons-halflings-регулярно-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/'));
    });

Вот раздел usemin в index.html:

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

0 ответов

Другие вопросы по тегам