Grunt cssmin rebasing a relative URI?

Question

I'm currently setting up grunt-usemin for our project but I'm running in a small issue with the cssmin task.

Our project depends on a few external libraries, some which bring a long some extra assets (like images or fonts). The problem is these libraries do not have the same folder structure.

This is an example of the different folder structures

lib
|--lib1
|   |--style1.css
|   +--image1.png
+--lib2
   |--styles
   |   +--style2.css
   +--images
       +--image2.png

In the index.html all the stylesheets are referenced and put inside a build block. As such, when the usemin task executes, the stylesheets of the libraries are concatenated in one minified file and put inside the output folder. The corresponding assets (images) are copied over to this output folder as well and flatened in the img folder. The output folder structure looks like

out
|--allstyles.min.css
|--image1.png
+--image2.png

As you can guess, the concatenated stylesheets has (in this example) two different relative URIs:

• image1.png
• ..\images\image2.png

This is causing an issue where some of the images cannot be found. I need a solution to rebase all relative URIs to the out folder. I tried using the target and root options of the cssmin task but to no avail. Could someone point me to a correct configuration of this task or to another Grunt task that could achieve what I'm looking for?

Thanks in advance!

Answer 1

I have a grunt file in C:\web\project and CSS files in C:\web\project\www\css. The following snippet is from my grunt file and it rebases URLs correctly for me.

var cssFiles = [
      'www/css/layout/Header.css',
      'www/css/layout/Footer.css',
      'www/css/vendor/chosen/chosen.css'
      // ...
];

cssmin: {
        concat: {
                options: {
                        keepBreaks: true, //  whether to keep line breaks (default is false)
                        debug: true, // set to true to get minification statistics under 'stats' property (see test/custom-test.js for examples)
                        noAdvanced: true, // set to true to disable advanced optimizations - selector & property merging, reduction, etc.
                        //relativeTo: 'http://online-domain-tools.com/'
                        noRebase: false, // whether to skip URLs rebasing
                        root: 'www'
                },
                nonull: true,
                src: cssFiles,
                dest: 'www/temp/application.css'
        },
        minify: {
                options: {},
                nonull: true,
                src: ['www/temp/application.css'],
                dest: 'www/temp/application.min.css'
        }
},

// ...

grunt.registerTask('default', ['cssmin:concat', 'cssmin:minify']);

Can you post your gruntfile to compare it?

Related reading: https://stackoverflow.com/a/21415649/99256

Answer 2

look in the cssmin documentation/options:

• rebase: set to false to skip URL rebasing

That solves the issue.