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

Question

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

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

在 WaspMask.css 文件中我有这个规则:

.wasp-loader-default { background-image: url("../resources/default_loader_circle.gif"); }

好吧，我已经尝试使用 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 更改为完整路径，而其他值将第一个斜杠添加到返回的路径。

关于如何解决这个问题有什么想法吗？

Answer 1

在为我的问题寻找解决方案之后，我在本期的 '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 属性是所有要缩小的文件的通用物理目录(我通过包含其路径的 json 文件加载这些文件)。

noAdvanced 属性是我用来避免我用 bootstrap.css 解释的问题的选项，尽管在@XhmikosR 发表在 https://github.com/gruntjs/grunt-contrib-cssmin/issues/103 的最后评论中，他说有一个补丁可以修复它。我还没有检查过。