gulp-compass がimage-url から生成するパスの意味がわからない君へ

ゴール

(全容を掴んだ上で書きなおしたので、実際にはあまり使わない構成かもしれないが気にしない)

• src/sass/*.scss にてimage-url("bg_body.gif") を指定

• src/images/* に画像を配置

• src/compiled_css/*.css にコンパイル結果が置かれる

• dist/css/ に*.css が置かれる

  • url("../images/bg_body.gif") で参照

• dist/images/ に画像が置かれる

検証

相対パスはどう計算される？

• 仮説

  • コンパイル後のCSS から見た時の、project への相対パス?
  • images_dir があれば、css とimages_dir の相対パスを計算、images_dir が無ければ、project との相対パスの後ろにデフォルトのiamges_dir をくっつけるだけ？

• 検証に使用したリポジトリ

  • https://github.com/masaki925/gulp_compass

• 検証によく使ったコマンド

# 前回のビルド結果を消す
bundle exec gulp clean

# ファイルの配置を確認。node_modules とかを避けたいのでdir 指定
ll ; tree dist src

# ビルド
bundle exec gulp build

• 検証結果シート
  • 挙動がよくわからんかったのでいろいろパラメータを変えてはビルドしてを繰り返してた。。
  • https://docs.google.com/spreadsheets/d/1Z6SyKVOoBQGzq99-OEO6WKb6esdCzLuuCRdKb_HPv2o/edit#gid=0

デバッグ

• gulp のcompass にdebug: true を渡すと、実際に実行されているcompass コマンドが表示される

結論

• config.rb の設定は無視される

• relative true のときはcss ファイルからみたときのimages のディレクトリの相対パスを取得する

  • https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb#L126
  • https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb#L260

• その他の条件も、↑のコードを読めばわかる、かも。

• relative false だとディレクトリ構成が違っていても最終的に辻褄を合わせることはできるが、build のときにimages が無いよとwarning が出てしまう

  • compile 前後でディレクトリ構成が変わらない場合
    • relative true で、普通にcompile 前のパスを指定 (css, image)
    • => warning 出ない
  • compile 前後でディレクトリ構成が変わる場合
    • relative false で、普通にcompile 前のパスを指定 (css, image)
    • => warning 出る

• こうするとよさそう

  • compile 前後でディレクトリ構成は揃える
    • build 後のcss から見たimages の位置を、compile 前後で同じにする
  • relative はtrue
  • image もパスを指定する

余談

最初からソースコード見れば検証シート不要だったかな。。でもソースコードがなかなか見つけられなかったからしょうがない。