Переписывание / сохранение относительных путей в сцепленных css-файлах внутри gulp-usemin
У меня есть эти требования:
- Конкатенация CSS-файлов.
- Пересмотрите составной файл CSS.
- Файлы ресурсов Rev, на которые ссылаются CSS-файлы (изображения, шрифты и т. Д.). Ссылки на файлы являются относительными и исходят от третьих лиц, поэтому я не могу их контролировать.
- Переписать ссылки на файлы в 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 -->