Grunt CSS 导入和路径答案

【问题标题】：Grunt CSS import and pathsGrunt CSS 导入和路径
【发布时间】：2015-03-18 21:59:46
【问题描述】：

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

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

【问题讨论】：

标签： css gruntjs minify concat grunt-contrib-cssmin

【解决方案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'
            }]
        }
    }

一切正常 :)

【讨论】：

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

【讨论】：