CSS内に記述したパスにCache Busting対応する

Published

たとえば、以下のようなソースコードがあったとき、

.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だったらプラグインあるっぽい。

関連している記事

著者について

森田 かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。