What's imagesDir & imagesPath in grunt-contrib-compass? - gruntjs

Question

I'm using grunt-contrib-compass, in the settings, there are options like imagesDir and imagesPath. I'm just wondering what's that for, and how do I use it?

Answer 1

So apparently that options to be used in conjunction with compass URL Helpers. If you've specified imagesDir in your Gruntfile.js, you can call a compass function images-url() to generate the path to your images folder.
For example, this is how you specify the Gruntfile.js:
compass: {
build: {
options: {
cssDir: './source/css/',
sassDir: './source/css/',
imagesDir: './source/images/',
force: true,
outputStyle: 'expanded',
}
}
}
And this is how you call the function from your scss file:
background-image: image-url( 'test.png' );
When you run the task, it'll be compiled into:
background-image: url('/./source/images/test.png');
Same thing applies for fontsDir, you just need to call different compass function font-url(). If you want to find more details, please follow the link http://compass-style.org/reference/compass/helpers/urls/

Answer 2

I'm not sure how much clearer it can get than what the docs have
[imagesDir](https://github.com/gruntjs/grunt-contrib-compass#imagesdir)
Type: String
The directory where you keep your images.
and
[imagesPath](https://github.com/gruntjs/grunt-contrib-compass#imagespath)
Type: String
Default: images
The directory where the images are kept. It is relative to the projectPath.
Maybe the definitions from Compass's configuration reference would be helpful too?
images_dir: The directory where the images are kept. It is relative to the project_path. Defaults to "images".
images_path: The full path to where images are kept. Defaults to <project_path>/<images_dir>.
You can specify these just like any other option in your Gruntfile.js:
compass: {
staging: {
options: {
imagesDir: 'images'
}
}
}
Note: these are typically used for compiling correct paths to images when you've used the compass image-url helper.