CSS内に記述したパスにCache Busting対応する
たとえば、以下のようなソースコードがあったとき、
.image {
background-image: url(/image/to/path/example.jpg);
}
@font-face {
font-family: "acms-fonts";
src: url(../fonts//acms-fonts.eot);
src: url(../fonts//acms-fonts.eot) format("embedded-opentype"), url(../fonts//acms-fonts.ttf) format("truetype"), url(../fonts//acms-fonts.woff) format("woff"), url(../fonts//acms-fonts.svg) format("svg");
}
以下のように変換してほしい。
.image {
background-image: url(/image/to/path/example.jpg?version=20171017);
}
@font-face {
font-family: "acms-fonts";
src: url(../fonts//acms-fonts.eot?version=20171017);
src: url(../fonts//acms-fonts.eot?version=20171017) format("embedded-opentype"), url(../fonts//acms-fonts.ttf?version=20171017) format("truetype"), url(../fonts//acms-fonts.woff?version=20171017) format("woff"), url(../fonts//acms-fonts.svg?version=20171017) format("svg");
}
パス指定の末尾に「?version=20171017」とついています。
なんでかというと、ウェブサイトをリニューアルしてCSSをアップデートしたとき、以前と同じファイル名を読み込んでいると、画像の内容は変わっているはずなのにキャッシュが変わっていてリニューアル前の画像を読み込みに行ってしまうことがあるからです。
これを解決するために、CSS内でURLをしている箇所の末尾にクエリをつけてあげると、キャッシュが解除され、あたらしい画像を読み込んでくれるようになります。そして対応することを英語ではCache Bustingと呼んでいます。
この記事では調べた方法をご紹介しています。
Sassで対応する方法
See the Pen Automating Cache Busting by SCSS by Kasumi Morita (@mkasumi) on CodePen.
unique_id()という関数が用意されているみたいです。 Mixin版ではなぜか出力したCSSに「"（ダブルクオート）」がついてしまったので、unquote()関数も使用。
LESSで対応する方法
See the Pen Automating Cache Busting with LESS by Kasumi Morita (@mkasumi) on CodePen.
JSで日付が出力できるみたいです。もうLessは使ってないけれど、久しぶりに「Lessすごい！」ってなった瞬間でした。
gulpのプラグインで対応する方法
結局gulpのプラグインで対応しました。CSSプリプロセッサー側で対応しようとすると、パスを含むCSSを書くたびにCache Busting対策の記述を書かなければいけないし、もしツール（例えばSCSSからPostCSS）に変わった時にもう一度方法を探さなければいけないことを考えると、gulpで対応する方がいいかなと思ったからです。
以下のプラグインを使っています。
ついでに
PostCSSだったらプラグインあるっぽい。
森田かすみ
