Grunt.js: Replace path when concat multiple CSS files from different directories

Question

I'm trying to minify and combine multiple CSS files using Grunt.js concat and cssmin from different directories. Unfortunately, css breaks since each CSS has relative link to resources, for example:

background-image: url('images/background.jpg');

I was trying to find an answer for that on the web, but without any luck. Here is an example from Gruntfile.js code, which combine 2 different WP plugins CSS files:

module.exports = function (grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
        iphorm_woocommerce: {
            src: [
                '../wp-content/plugins/iphorm-form-builder/css/styles.css',
                '../wp-content/plugins/woocommerce/assets/css/select2.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css',
                '../wp-content/plugins/woocommerce/assets/css/woocommerce.css',
            ],
            dest: '../wp-content/plugins/woocommerce/assets/css/combined.css'
        }
    }
    })
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat']);
};

Answer 1

try it

cssmin : {
            options: {
                rebase: true,
                relativeTo: './'
            },
            target : {
                src : <your sources>,
                dest : "dest directory"
            }
        }