CSS和Grunt压缩中的相对路径问题？

Question

在我提出问题之前，我想指出在StackOverflow上有几个类似的问题（ 这里，这里，这里和这里），但是它们都没有给出一个准确的解决方案。

---

问题 我设置了一个工作流程，在其中Grunt将多个CSS文件合并并缩小到一个生产环境的单个文件中。

我面临的问题是，运行Grunt后字体和图像路径会中断，因为它们仍然指向其现有的相对文件路径。

例如：

在static/homepage/startup/common-files/css/icon-font.css中，我有以下CSS规则：

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);

在我的Gruntfile中，我指定了我希望我的压缩后的css文件的输出为位于 static/css/custom/homepage/下的style.min.css。这样会导致所有字体和图像依赖项无法找到并在浏览器中返回404状态。

我已经想出了两种解决此问题的方法：

1. 复制所有依赖文件，使它们相对于style.min.css所在的新目录。但是这样做可能会很快变得凌乱并破坏我的项目文件结构！

2. 手动更改路径。但再次强调，使用Grunt的目的就是自动化任务！

有人知道如何解决这个问题吗？我已经浪费了将近10小时在这上面，我开始放弃了。人们声称已经在 Github问题页面 上解决了此问题，但没有人真正说明他们如何解决的。

编辑：

我查看了clean-css库源代码，发现可以向缩小器对象传递一个relativeTo属性。我已经试过了，但还是卡住了。如果我进一步解决了这个问题，我会报告的。

编辑：

好的，我终于找到一些解释relativeTo（和其他）属性的文档。然而，我仍然不确定我的文件结构应该是什么样子的，所以还在卡住了。

relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs

---

这是我的 Grunt 配置文件，仅供参考：

    module.exports = function(grunt) {
        grunt.initConfig({
            concat: {
                homepage: {
                    src: [
                        'static/homepage/startup/common-files/css/icon-font.css', 
                        'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
                        'static/homepage/startup/flat-ui/css/flat-ui.css',
                        'static/homepage/static/css/style.css'
                    ],
                    dest: 'static/css/custom/homepage/compiled.css',
                }
            },
            cssmin: {

                homepage: {
                    src: 'static/css/custom/homepage/compiled.css',
                    dest: 'static/css/custom/homepage/style.min.css'
                }   
            }                           
        });             

        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks("grunt-css-url-rewrite");
        grunt.registerTask('build', ['concat', 'cssmin']);
        grunt.registerTask('default', ["build"]);
};

谢谢。

- Joel Murphy

---

我也遇到了同样的问题，花了好几个小时尝试使用'relativeTo'、'target'和'root'，但都没有成功 :/ - Christophe

我可能接近解决方案了！请看这里的我的评论（我的用户名是jjmpsp）：https://github.com/yeoman/grunt-usemin/issues/225 - Joel Murphy

好的，我明天会尝试看一下。（我已经感觉到痛苦了^^） - Christophe

好的，我终于成功让它工作了。你应该移除concat任务，只使用cssmin。然后尝试调整options.target，也许是'static/css/custom/homepage/style.min.css'。对于像我一样使用usemin的人，可以通过手动设置流程来删除concat任务。 - Christophe

Answer 1

在 static/css/custom/homepage 中创建一个名为 styles.less 的 less 文件。

使用相对路径 @import 您的 css 文件。

@import "../../../homepage/startup/common-files/css/icon-font.css";
@import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
@import "../../../homepage/startup/flat-ui/css/flat-ui.css";
@import "../../../homepage/static/css/style.css";

然后在你的gruntfile.js文件中：

module.exports = function(grunt) {
    grunt.initConfig({
      less: {
        dist: {
            options: {
                compress: true,
                sourceMap: false,
                // Add any other path/to/fonts here
                paths: ['static/homepage/startup/common-files']
            },
            files: {
                'public/css/dist/style.min.css': 'public/css/default/styles.less'
            }
        }
    }       
  });             

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks("grunt-css-url-rewrite");
  grunt.registerTask('build', ["less:dist"]);
  grunt.registerTask('default', ["build"]);
};

- pegasuspect