如何重写相关的url在cssmin的缩小css？ [英] how to rewrite relative url in minified css with cssmin?

问题描述

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

I've been looking for a solution to my issue and I've found posts with similar problems, but not the same. I have the following folder structure:

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

$ b b

Inside WaspMask.css 文件我有这个规则：

wasp-loader-default {
background-image：url（../ resources / default_loader_circle.gif）;
}

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

好吧，我试图将它（与其他css文件组合）与 cssmin 插件。我的gruntfile放置在 WaspFramework 文件夹，我想生成缩小的CSS。 gruntfile文件如下所示：

Well, I've tried to minify it (combined with other css files) with cssmin plugin. My gruntfile is placed in WaspFramework folder, and I want generate the minified css there. The gruntfile file looks like this:

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 属性：

My problem is that with this configuration of cssmin, the url of the wasp-loader-default class hasn't changed so, obviously, the output file can't find the image. I've tried changing the cssmin options, adding the root property:

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

将网址更改为 /GUI/Controls/WaspMask/resources/default_loader_circle.gif ，但它不工作，因为路径的第一个斜线。我需要得到输出文件的相对路径（ GUI / Controls / WaspMask / resources / default_loader_circle.gif 应该工作），因为我的应用程序发布在虚拟目录下。所以我不能使用从应用程序的根的完整路径。我甚至尝试设置其他值为 root ，但其中一些将URL更改为完整路径，其他人添加第一个斜杠到返回的路径。

It changes the url to /GUI/Controls/WaspMask/resources/default_loader_circle.gif, but it doesn't work because of the first slash of the path. I would need to get a relative path to the output file (GUI/Controls/WaspMask/resources/default_loader_circle.gif should work) because my application is published under a virtual directory. So I can't use a full path from the root of the application. I've even tried to set other values to root but some of them change the url to a full path and others add the first slash to the returned path.

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

Any idea about how to solve this?

推荐答案

对我的问题，我找到了我需要在这个问题的属性'cssmin'插件：
https://github.com/gruntjs/grunt-contrib-cssmin/pull/47

After being looking for a solution to my problem, I've found the property I need in this issue of the 'cssmin' plugin: https://github.com/gruntjs/grunt-contrib-cssmin/pull/47

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

Although I've found a little issue while I was compressing the 'bootstrap.css' file in my vendor's bundle file. This issue and a possible solution (basically, setting "noAdvanced" property to true in the task's options) is explained deeply in the post I did yesterday: https://github.com/gruntjs/grunt-contrib-cssmin/issues/103

EDIT：
这是我的grunt文件：

Here is my grunt file:

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文件加载这些文件）。

The target property is the common physical directory to all the files to minify (I load those files through a json file which contains their paths).

noAdvanced 属性是我使用的选项，以避免我用 bootstrap.css 解释的问题，虽然在@xhmikosR最后评论张贴在 https://github.com/gruntjs/grunt-contrib-cssmin/issues/103 ，他说有一个补丁来修复它。我尚未检查它。

noAdvanced property is the option I use to avoid the problem I've explained with bootstrap.css, although in the last comment by @XhmikosR posted in https://github.com/gruntjs/grunt-contrib-cssmin/issues/103, he says that there is a patch to fix it. I've not checked it yet.

这篇关于如何重写相关的url在cssmin的缩小css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！