cssgruntjsrelative-pathgrunt-contrib-cssmin

grunt-contrib-cssmin : Relative path of images is not replaced in target minified file


I am using grunt-contrib-cssmin, for the minification of my css files. I want the relative urls in the css files to be replaced automatically in my target minified file. I have looked for this problem and found the two options that I can use to replace the url,

target, root

I think target is the one I am supposed to be using. I tried it in my following Gruntfile.js but it did not resulted in the minified file that I wanted.

Following is the Gruntfile.js

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
  cssmin: {
    combine: {
      options: {
        target: "build/"
      },
      files: [{
        dest: 'build/app.min.css',
        src: "Modules/test/app.css"
      }]
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-cssmin');

// Default task(s).
grunt.registerTask('default', ['cssmin']);
};

It converts following app.css -:

.edit {
  background: url(../../Main/img/edit.png);
}

to following app.min.css

.edit{background:url(../../Main/img/edit.png)}

What I want is that the URL of the minified be something like the following -:

.edit{background:url(../Main/img/edit.png)}

I think the target options is supposed to change the relative URL, but it is doing nothing in my case. Please let me know what I am doing anything wrong.

Thanks,

Sukhdeep


Solution

  • I think you need to set rebase to true, and set the paths appropriately. I was struggling with that too, and it was not obvious. After a bit of trial and error i got it to work like this.

        grunt.initConfig({
          cssmin: {
              options: {
                  relativeTo: "./Main/img",
                  target: "./build",
                  rebase: true
              },
              combine: {
                  files: [{
                      dest: 'build/precisionag.min.css',
                      src: "Modules/test/app.css"
                  }]
              }
          }
        });
    

    More information on the different clean-css options can be found here clean-css.