What are imagesDir & imagesPath in grunt-contrib-compass?

Question

I use grunt-contrib-compass , the options have options such as imagesDir and imagesPath . I'm just wondering what that means and how to use it?

Answer 1

Thus, it is obvious that the options will be used in conjunction with the compass URL Helpers . If you specified imagesDir in Gruntfile.js , you can call the compass images-url() function to create the path to the image folder.

For example, this is how you specify 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 will be compiled into:

 background-image: url('/./source/images/test.png'); 

The same goes for fontsDir , you just need to call another compass font-url() function. If you want to find more information, go to http://compass-style.org/reference/compass/helpers/urls/

Answer 2

I'm not sure how much clearer this is than what 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. 

Perhaps the definitions from Compass Configuration Link would be useful?

 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 them in the same way as any other parameter in the Gruntfile.js file:

 compass: { staging: { options: { imagesDir: 'images' } } } 

Note: they are usually used to compile the correct image paths when you used the compass helper url .