How to compile 2 separate LESS files with grunt-recess

Question

I want to compile 2 separate files with grunt recess:

recess: {
            dist: {
                options: {
                    compile: true
                },
                files: {
                    'path/css/custom.css': ['path/less/custom.less'],
                    'path/css/animate.css': ['path/less/antimate.less'],

                },
            },
        }, 

Only the first file is compiling before grunt exits. Where am I going wrong?

Answer 1

You should try this

recess: {
    dist: {
        options: {
            compile: true
        },
        files: [
            {src: ['path/less/custom.less'], dest: 'path/css/custom.css'},
            {src: ['path/less/antimate.less'], dest: 'path/css/animate.css'}
        ],
    }
}, 

Or you can enable dynamic expansion to compile every .less in your folder:

recess: {
    dist: {
        options: {
            compile: true
        },
        files: [
            {
                expand: true,            // Enable dynamic expansion.
                cwd: 'path/to/less',     // Src matches are relative to this path.
                src: ['*.less'],         // Actual pattern(s) to match.
                dest: 'path/to/css/',    // Destination path prefix.
                ext: '.css',             // Dest filepaths will have this extension.
            },
        ],
    },
}, 

See http://gruntjs.com/configuring-tasks for more reference.

Answer 2

like this:

recess: {
    dist: {
        options: {
            compile: true
        },
        files: {
            'dist/combined.css': [
                'src/main.css',
                'src/component.css'
            ]
        }
    }
}