gruntjs - grunt-contrib-compass 中的 imagesDir 和 imagesPath 是什么？

Question

我正在使用grunt-contrib-compass，在设置中，有imagesDir和之类的选项imagesPath。我只是想知道这是做什么用的，我该如何使用它？

Answer 1

显然，这些选项要与compass URL Helpers. 如果您已在 中指定imagesDir，Gruntfile.js则可以调用一个compass函数images-url()来生成图像文件夹的路径。

例如，这是您指定的方式Gruntfile.js：

compass: {
  build: {
    options: {
      cssDir: './source/css/',
      sassDir: './source/css/',
      imagesDir: './source/images/',
      force: true,
      outputStyle: 'expanded',
    }
  }
}

这就是您从scss文件中调用函数的方式：

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

当你运行任务时，它会被编译成：

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

同样的事情适用fontsDir，你只需要调用不同的compass函数font-url()。如果您想了解更多详细信息，请点击链接http://compass-style.org/reference/compass/helpers/urls/

Answer 2

我不确定它比文档更清晰

[imagesDir](https://github.com/gruntjs/grunt-contrib-compass#imagesdir)
Type: String
The directory where you keep your images.

和

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

也许Compass 的配置参考中的定义也会有帮助？

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

您可以像 Gruntfile.js 中的任何其他选项一样指定这些：

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

注意：当您使用 compass image-url helper时，这些通常用于编译图像的正确路径。