0

我在 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");

并且所有 3rd 方 css 文件都具有未解析的相对图像路径。我可以看到 cssmin 使用干净的 css应该能够帮助处理这些问题，但是经过数小时的搜索和阅读文档后，我无法提供任何明确的示例或文档来说明如何配置上述内容来解决这个问题？

4

2 回答 2

1

我使用 Ze Rubeus 建议将我的字体导入语句移动到 HTML 中（有点烦人，因为这意味着修改第 3 方 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'
            }]
        }
    }

一切正常:)

于 2015-03-19T13:21:19.473 回答
0

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这些目录上的所有 url：

                    '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以自动跟踪这些文件中的更改并应用这些任务。

于 2015-03-18T22:30:43.170 回答