css - 如何使用 cssmin 在缩小的 css 中重写相对 url？

我一直在寻找我的问题的解决方案，我发现了有类似问题的帖子，但不一样。我有以下文件夹结构:

js
└── GUIFramework
    ├── external
    └── WaspFramework
        ├── Core
        └── GUI
            └── Controls
                └── WaspMask
                    ├── css
                    │   └── WaspMask.css
                    └── resources
                        └── default_loader_circle.gif

在 WaspMask.css 文件中，我有以下规则:



好吧，我尝试使用 cssmin 插件缩小它(与其他 css 文件结合)。我的 gruntfile 放在 WaspFramework 文件夹中，我想在那里生成缩小的 css。 gruntfile 文件如下所示:

module.exports = function (grunt) {

    var _sources = grunt.file.readJSON('./sources.json');
    var _filesCSS = _sources.css;

    grunt.initConfig({

        cssmin: {
            wasp: {
                options: {
                    keepSpecialComments: 0
                },
                files: {
                    'wasp-bundle.min.css': _filesCSS
                }
            }
        }
    });

    // load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // register at least this one task
    grunt.registerTask('default', ['cssmin']);
};

在 _filesCSS 中，我有要缩小和合并的所有文件的路径，包括 WaspMask.css。

我的问题是，使用 cssmin 的这种配置，wasp-loader-default 类的 url 没有改变，所以很明显，输出文件找不到图像。我尝试更改 cssmin 选项，添加 root 属性:

options: {
    keepSpecialComments: 0,
    root: '.',
},

它将 url 更改为 /GUI/Controls/WaspMask/resources/default_loader_circle.gif ，但由于路径的第一个斜杠，它不起作用。我需要获取输出文件的相对路径( GUI/Controls/WaspMask/resources/default_loader_circle.gif 应该可以工作)，因为我的应用程序是在虚拟目录下发布的。所以我不能使用应用程序根目录的完整路径。我什至尝试为 root 设置其他值，但其中一些将 url 更改为完整路径，而另一些将第一个斜杠添加到返回的路径。

关于如何解决这个问题的任何想法？

最佳答案

在为我的问题寻找解决方案后，我在本期 'cssmin' 插件中找到了我需要的属性:
https://github.com/gruntjs/grunt-contrib-cssmin/pull/47

虽然我在压缩供应商捆绑文件中的 'bootstrap.css' 文件时发现了一个小问题。这个问题和一个可能的解决方案(基本上，在任务的选项中将 "noAdvanced" 属性设置为 true)在我昨天做的帖子中得到了深入解释:
https://github.com/gruntjs/grunt-contrib-cssmin/issues/103

编辑:
这是我的 grunt 文件:

module.exports = function (grunt) {
    var conf = grunt.file.readJSON('sources.json');
    grunt.initConfig({
        cssmin: {
            options: {
                keepSpecialComments: 0,
                target: 'commonDir',
                noAdvanced: true
            },
            test: {
                files: {
                    'test.min.css': conf.css
                }
            }
        }
    });
    // load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // register at least this one task
    grunt.registerTask('default', ['cssmin']);
};

target 属性是所有要缩小的文件的公共(public)物理目录(我通过包含其路径的 json 文件加载这些文件)。
noAdvanced 属性是我用来避免我用 bootstrap.css 解释的问题的选项，尽管在@XhmikosR 发布在 https://github.com/gruntjs/grunt-contrib-cssmin/issues/103 的最后一条评论中，他说有一个补丁可以修复它。我还没有检查过。

关于css - 如何使用 cssmin 在缩小的 css 中重写相对 url？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23916622/