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.

If I understand correctly, you cannot using globbing patterns in the cssDir and sassDir options because the Compass Grunt plugin can only compile to one directory per given target. — Timusan
Forgive me, I'm still new to Grunt. What is the given target in this case? — MattSidor
Ah, no problem. The given target here is dev. Grunt always defines its tasks as the task itself, compass in this case, and multiple targets for the task. You could go ahead and define more targets besides dev (which also does not need to be called dev by the way). To call a specific target of a task you call it with grunt task:target. In your case grunt compass:dev. Simply running grunt compass also works here because you only have one target defined. — Timusan
Okay, I get it now! I did not understand that was a target. So all I need to do is specify a different target for each appX folder, and then I can set up a unique grunt-contrib-watch task for each target with the sass/css folder paths defined explicitly -- no wildcards necessary. Thank you so much Timusan. If you post your comment as an answer, I will mark it with the green checkmark. — MattSidor
More info on grunt targets: gruntjs.com/configuring-tasks#task-configuration-and-targets — MattSidor

Timusan Timusan · Accepted Answer · 2014-12-10T23:20:04

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.

Wildcard selectors in css path for grunt-contrib-compass

1 Answers