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'

我建议您使用HTML link，而不是css字体导入，就像下面的一样

<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中没有为您更正css文件中导入Path的任务！

关于你的代码，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，以自动跟踪这些文件中的更改并应用这些任务。