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

Question

У меня есть следующие настройки в Grunt для CONCAT и Минимизация моих проектов 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 использует clean css, который должен помочь справиться с этими проблемами, но после нескольких часов поиска и чтения документов я не могу представить каких-либо ясных примеров или комментариев о том, как настроить выше, чтобы решить эту проблему?

Answer 1

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

И вместо css шрифта импорта I советы вы использовать 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 в терминале, чтобы автоматически отслеживать изменения в этих файлах и применить эти задачи.

Answer 2

Я использовал предложение 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' 
      }] 
     } 
    } 

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