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.
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
.