Относительные пути в CSS и минимизации Grunt?

Перед тем, как задать этот вопрос, я хочу отметить, что существует несколько подобных вопросов размещены здесь, на 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 в браузере.

Что я сделал, чтобы попытаться решить эту проблему?

Я понял, что есть две возможности решить эту проблему:

  1. Скопируйте все зависимые файлы, чтобы они style.min.css к новому каталогу, где находится style.min.css. Недостатком этого является то, что он может быстро стать грязным и разрушить структуру моего проекта!
  2. Измените пути вручную вручную. Но опять же, какой смысл в этом? 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"]);
};

Благодарю.

Ответы

Ответ 1

Создайте меньше файлов в static/css/custom/homepage как styles.less

@import ваш css относительно:

@import "../../../homepage/startup/common-files/css/icon-font.css";
@import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
@import "../../../homepage/startup/flat-ui/css/flat-ui.css";
@import "../../../homepage/static/css/style.css";

Затем в вашем файле gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
      less: {
        dist: {
            options: {
                compress: true,
                sourceMap: false,
                // Add any other path/to/fonts here
                paths: ['static/homepage/startup/common-files']
            },
            files: {
                'public/css/dist/style.min.css': 'public/css/default/styles.less'
            }
        }
    }       
  });             

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks("grunt-css-url-rewrite");
  grunt.registerTask('build', ["less:dist"]);
  grunt.registerTask('default', ["build"]);
};