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语句

@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

我使用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'>

请务必更改这些目录中的所有网址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，以自动跟踪这些文件中的更改并应用这些任务。

Grunt CSS导入和路径

2 个答案: