gruntjs - grunt-contrib-compass の imagesDir & imagesPath とは?

Question

を使用していますが、設定にはやgrunt-contrib-compassなどのオプションがあります。それは何のためにあるのだろうか、そしてどうやって使うのだろうか？imagesDirimagesPath

Answer 1

そのため、どうやらそのオプションは と組み合わせて使用​​ する必要がありますcompass URL Helpers。で指定imagesDirした場合は、関数をGruntfile.js呼び出して画像フォルダーへのパスを生成できます。compassimages-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を呼び出すだけです。詳細については、http://compass-style.org/reference/compass/helpers/urls/のリンクをたどってください。compassfont-url()

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.

コンパスの構成リファレンスからの定義も役立つでしょうか?

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'
    }
  }
}

注: これらは通常、コンパスimage-url ヘルパーを使用したときに、画像への正しいパスをコンパイルするために使用されます。