4

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?

Zendy
  • 1,664
  • 1
  • 17
  • 24

2 Answers2

6

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/

Zendy
  • 1,664
  • 1
  • 17
  • 24
0

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.

imjared
  • 19,492
  • 4
  • 49
  • 72
  • Thanks for the answer, yes I know the explanation is very clear, but I don't really know what to use that for in terms of compiling. – Zendy Sep 04 '13 at 00:07