2

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']);
};
Shir Gans
  • 1,976
  • 3
  • 23
  • 40

1 Answers1

1

try it 

cssmin : {
            options: {
                rebase: true,
                relativeTo: './'
            },
            target : {
                src : <your sources>,
                dest : "dest directory"
            }
        }
Александр Йовенко
  • 11
  • 1
  • +1, Mar 2023: the GitHub repo for cssmin only documents 2 options (sourceMap and report). The rebase options are not mentioned but work perfectly. What's with the node community?.... – bmiller Mar 02 '23 at 14:57