CODEWITHSUNDEEP
cssurlgruntjsminify
christiansr85
christiansr85

Reputation: 877

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

Inside WaspMask.css file I have this rule:

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

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']);
};

In _filesCSS I have the paths of all the files to minify and combine, WaspMask.css included.

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: '.',
},

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?

Upvotes: 4

Views: 4938

Answers (1)

christiansr85
christiansr85

Reputation: 877

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

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: 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']);
};

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 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.

Upvotes: 1

Related Questions