Grunt Sass: change one folder name on destination path - sass

Question

How to generate CSS files in a folder other than that of the SCSS source, but keeping a part of the tree of it?
Let me explain, I have different folders with several .scss sources:
resources/client-1/scss/app.scss
resources/client-2/scss/app.scss
I would like the CSS generated this place in the css folder and not scss. So:
resources/client-1/css/app.scss
resources/client-2/css/app.scss
But I would especially like to have a dynamic configuration, because the number of client-x folder will increase with time.
Any idea?
Thank.
EDIT:
My configuration using grunt-sass is currently as follows:
module.exports = {
options: {
outputStyle: 'nested',
precision: 3,
sourceMap: true
},
main: {
files: {
'resources/clients-1/css/style.css': ['resources/clients-1/scss/style.scss' ],
'resources/clients-2/css/style.css': [ 'resources/clients-2/scss/style.scss' ]
}
}
};

Answer 1

You can build the files object dynamically (instead of using the Files Object Format, which is what you're currently using), and utilize the rename property to create the new destination path for each resultant .css files.
Replace your files property with the following instead:
files: [{
expand: true,
cwd: 'resources',
src: ['**/*.scss'],
dest: 'resources/', // <-- Value must match `cwd` value and
// include trailing forward slash.
ext: '.css',
rename: function(dest, src) {
var parts = src.split('/');
parts.splice(1, 1, 'css');
return dest + parts.join('/');
}
}]
Explanation:
In the body of the rename function we firstly split the src path into an Array via the line which reads:
var parts = src.split('/');
Given your example source path of 'resources/clients-1/scss/style.scss', this will result in an Array assigned to the parts variable like this:
['clients-1', 'scss', 'style.scss']
We then use splice() in the line reading:
parts.splice(1, 1, 'css');
This replaces the value at index 1 (i.e. 'scss') with the given value of 'css'. The parts Array now results in this:
['clients-1', 'css', 'style.scss']
Finally, via the line which reads:
return dest + parts.join('/');
We return from the function a new String for the dest path. Given the previous example the dest path will be this:
'resources/clients-1/css/style.css'
Because the ext property has a value of .css, grunt replaces the original .scss extension name with .css.
Note:
If your resources folder has sub-folder(s) containing .scss files that you don't want to generate a .css file for you'll need to negate them using a globbing pattern. For example lets say your resources directory looks like this:
.
├── resources
│   ├── clients-1
│   │   └── scss
│ │ └── style.scss
│ ├── clients-2
│ │ └── scss
│ │ └── style.scss
│ ├── foo
│ │ └── scss
│ │ └── style.scss
│ └── quux
│ └── scss
│ └── style.scss
└── ...
And let's say you don't want .css files generated for the .scss files which exist in folders foo and quux, (i.e. you only want to process folders clients-1 and clients-2).
Given such a situation you would need to change your src property in the code example provided above to:
src: ['{,!(foo|quux)/**/}*.scss'],