Wildcard selectors in css path for grunt-contrib-compass

Question

I'm trying to use grunt-contrib-compass for an AngularJS project with multiple app folders. Here is my basic directory structure:

/root
   /appA
   /appB

   ...

   /appX
     /public
         /modules
             /moduleName
                 /css
                 /sass

gruntfile.js is stored in /root

My compass task is set up as follows:

compass: {
    dev: {
        options: {
            cssDir: 'app*/public/modules/**/css',
            sassDir: 'app*/public/modules/**/sass',
            outputStyle: 'compressed'
        } 
    }
}

Note the wildcard selectors (*) in "cssDir" and "sassDir".

When this task runs, it successfully finds the .scss files in the directory specified for "sass". However, upon creating the .css files, it creates a new folder structure in /root like so:

/root
   /app*
       /public
           /modules
               /**
                 /css

The "css" folder is left empty and the actual .css file is saved in the same directory as my .scss files.

As an example, this is the terminal output for one of the .scss files when the compass task is run:

>> File "appStudentHousing/public/modules/studentHousingHome/sass/styles.scss" changed.
Running "compass:dev" (compass) task
directory appStudentHousing/public/modules/studentHousingHome/sass
write appStudentHousing/public/modules/studentHousingHome/sass/styles.css (0.003s)

It appears that the task recognizes wildcard selectors in the "sassDir" option, but it does not recognize them in the "cssDir" option. It creates a blank folder structure with the asterisks in the actual folder name, and then for some reason it saves the output .css file in the same folder as the .scss file.

Thanks much for any insight you can provide.

Answer 1

My comments converted into an answer:

Currently, the compass grunt plugin can only process single directories per target, thus no globbing that would match with multiple directories.

To circumvent this limitation, you always have the ability to create mutiple targets inside your compass task (Grunt functionality). A target is a subdivision of a task and can be used to setup different execution scenarios.

Two different targets for the compass plugin could look something similar to this:

compass: {
    dev: {
        options: {
            cssDir: 'app/dev/modules/css',
            sassDir: 'app/dev/modules/sass',
            outputStyle: 'compressed'
        } 
    },
    live: {
        options: {
            cssDir: 'app/live/modules/css',
            sassDir: 'app/live/modules/sass',
            outputStyle: 'compressed'
        } 
    }
}

This would give you two targets, dev and live, which specify different options. To execute each target individually, you simply call them on your command-line as follows:

$ grunt compass:dev
$ grunt compass:live

The naming of a target is totally up to you, there are no strict conventions to follow. If you have a single target for your task, then running the task like so:

$ grunt compass

Executes the single target. You do not need to explicitly specify it. However, if you have multiple targets in your task, then Grunt shall execute all of them in order when running with the above command.

And, as you have seen yourself, the official Grunt documentation gives you more detailed info regarding tasks and targets.