Перед тем, как задать этот вопрос, я хочу отметить, что существует несколько подобных вопросов размещены здесь, на StackOverflow, но ни один из них не обеспечивает точное решение задачи.
Проблема
У меня есть настройка рабочего процесса, где Grunt объединяет и минимизирует несколько файлов css в один файл для рабочей среды.
Проблема, с которой я сталкиваюсь, заключается в том, что пути шрифта и изображения ломаются после запуска Grunt, поскольку они все еще указывают на их существующие относительные пути к файлам.
В качестве примера:
Внутри static/homepage/startup/common-files/css/icon-font.css
меня есть следующее правило CSS:
@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
В моем файле Gruntfile я указываю, что я хочу, чтобы выход моего мини файла css был style.min.css
расположенный в static/css/custom/homepage/
. Проблема заключается в том, что путь к файлу изменяется, в результате чего все зависимости шрифтов и изображений больше не обнаруживаются и возвращают статус 404 в браузере.
Что я сделал, чтобы попытаться решить эту проблему?
Я понял, что есть две возможности решить эту проблему:
- Скопируйте все зависимые файлы, чтобы они
style.min.css
к новому каталогу, где находитсяstyle.min.css
. Недостатком этого является то, что он может быстро стать грязным и разрушить структуру моего проекта! - Измените пути вручную вручную. Но опять же, какой смысл в этом? Grunt был разработан для автоматизации задач!
Кто-нибудь знает, как решить эту проблему? Я потратил почти 10 часов на это, и я начинаю сдаваться. Люди заявили, что исправили проблему на странице проблемы Github, но никто не говорит, как они ее исправили.
РЕДАКТИРОВАТЬ:
Я просмотрел исходный код библиотеки pure-css, и кажется, что вы можете передать свойство relativeTo
в объект-минитор. У меня был беспорядок с этим, но я все еще застрял. Я отчитаю, если буду дальше.
РЕДАКТИРОВАТЬ:
Итак, я наконец нашел некоторую документацию, которая объясняет, что делают свойства relativeTo
(и другие). Я все еще придерживаюсь того, что моя конфигурация должна быть для моей файловой структуры, хотя....
relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs
Вот мой конфигурационный файл Grunt для справки:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
homepage: {
src: [
'static/homepage/startup/common-files/css/icon-font.css',
'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
'static/homepage/startup/flat-ui/css/flat-ui.css',
'static/homepage/static/css/style.css'
],
dest: 'static/css/custom/homepage/compiled.css',
}
},
cssmin: {
homepage: {
src: 'static/css/custom/homepage/compiled.css',
dest: 'static/css/custom/homepage/style.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ["build"]);
};
Благодарю.