Can I configure the grint-contrib-less task to compile into a parallel structure?

Question

We are currently using grunt-contrib-less to process our LESS file as a Grunt task. The fewer files are stored in a structure like this:

assets/ styles/ base.less client/ client.less device/ tablet.less phone.less 

For our Grunt configuration, we have the following:

 less: { options: { paths: 'assets/', yuicompress: false, ieCompat: true, require: [ 'assets/styles/base.less' ] }, src: { expand: true, cwd: 'assets/', src: [ 'styles/**/*.less' ], ext: '.css', dest: 'assets/' } }, 

Currently, this installs all generated css files into the same directory as the source file with fewer files. We would like them to spit out in the / assets / css / directory, but with the same relative structure. eg:

 assets/ css/ base.css client/ client.css device/ tablet.css phone.css 

Is there a grunt-free configuration that can do this?

Answer 1

I managed to achieve the desired effect using Gruntfile.js

 var path = require('path'); module.exports = function(grunt) { grunt.initConfig({ less: { options: { paths: 'assets/', yuicompress: false, ieCompat: true, require: [ 'assets/styles/base.less' ] }, src: { expand: true, cwd: 'assets/', src: [ 'styles/**/*.less' ], ext: '.css', dest: 'assets', rename: function(dest, src) { return path.join(dest, src.replace(/^styles/, 'css')); } } }, }); grunt.loadNpmTasks('grunt-contrib-less'); } 

Description

Although it is not in grunt-contrib-less docs, there are many features available for file objects. I did not understand that it was a lot, until I worked on the answer to this question. A link to documents on them is under resources.

Resources

Task Settings - Dynamically Create File Objects

Answer 2

An easier way to do this is as follows:

 less: { options: { paths: 'assets/', ieCompat: true, require: [ 'assets/styles/base.less' ] }, src: { expand: true, cwd: 'assets/styles/', src: [ '**/*.less' ], ext: '.css', dest: 'assets/css' } },