Grunt CSS импорт и пути

Question

У меня есть следующие настройки в Grunt для согласования и минимизации моих проектов CSS

cssmin: {
        options: {

        },
        concat: {
            files: {
                'dist/app.css': [
                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'
                ]
            }
        },
        min: {
            files: [{
                src: 'dist/app.css',
                dest: 'dist/app.css'
            }]
        }
    },

Он отлично работает, за исключением того, что, насколько я могу судить, он удалил следующий оператор импорта

@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");

И у всех сторонних CSS-файлов есть относительные пути к изображениям, которые не разрешены. Я вижу, что cssmin использует чистый CSS, который должен помочь справиться с этими проблемами, но после нескольких часов поиска и чтения документов я не могу найти четких примеров или пояснений о том, как настроить вышеупомянутое, чтобы решить эту проблему?

Answer 1

Вместо этого я использовал предложение Ze Rubeus о переносе своего оператора импорта шрифта в HTML (немного раздражает, так как это означает изменение стороннего файла CSS). Но я нашел вариант для исправления путей CSS, который

rebase: true,
relativeTo: './'

Моя конфигурация cssmin теперь выглядит

cssmin: {
        options: {
            rebase: true,
            relativeTo: './'
        },
        concat: {
            files: {
                'dist/app.css': [
                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'
                ]
            }
        },
        min: {
            files: [{
                src: 'dist/app.css',
                dest: 'dist/app.css'
            }]
        }
    }

И все работает:)

Answer 2

Вы должны изменить все, что вы импортируете PATH зависеть от этого каталога 'dist/app.css'

И вместо css импорт шрифтов советую использовать HTML link как следующее

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>

убедитесь, что изменили все URL Path's в этих каталогах:

                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'

зависит от этого output'dist/app.css': потому что в gruntjs нет задачи, которая исправляет импорт Path в css файлы для вас!

в отношении вашего кода watch Задача должна быть примерно такой:

   watch: {

       css: {
           files: ['tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'],
           tasks: ['concat','cssmin'],
           options: { spawn: false }
       }
   },

И выполнить эту команду grunt watch в вашем терминале, чтобы автоматически отслеживать изменения в этих файлах и применять эти задачи.