SASSファイル内にリンクされているキャッシュ・バスト画像

Question

私はLaravel 5.0を新しく導入していますが、PHPは新しくできません。私はElixirを使ってSASSをコンパイルし、自分のリソースディレクトリからイメージをコピーし、キャッシュを防ぐためにmix.version関数を通して実行しました。

これは、CSS、画像、JavaScriptには効果がありますが、私のCSS/SASSにリンクされた画像をElixirにキャッシュバストさせることは可能ですか？確かにイメージをバージョンアップするのは簡単ですが、新しいファイル名を反映するようにCSSを調整する方法はありますか？

私はこれを発見しました：https://github.com/trentearl/gulp-css-url-adjuster これにより、問題の半分が解決されるように、CSSファイル内のファイルパスにクエリパラメータを追加できるようになります。私は、gulpが実行されるたびにクエリパラメータを自動的に変更することが可能な場合、これを使用することは非常にうれしいでしょう。

どのようにこれを達成できるか、それが可能なのかどうかについてのご意見はありますか？

私はこれをやりたいのですが、私は常にアプリケーションを開発しています。しばしば再配置される大規模なスプライトシートを使用します。キャッシュの破棄が必要です。私は多くの時間と労力を要します。

おかげ

Answer 1

インスピレーションのためのm @Amo、私が使用した最後の解決策は、関数を使ってランダムな値を生成するmixinでした。これにより、カスタムのSASS関数を定義する必要がなくなるので、@Ameliaが指摘したように、よりシンプルで、少し洗っています。

ミックスイン

@mixin background-cache-bust($url) { 
    background-image: #{'url('} + $url + #{'?v='} + unique_id() + #{')'}; 
} 

例

.sprite { 
    @include background-cache-bust('/build/images/common/sprite.png'); 
} 

結果

.sprite { 
    background-image: "url(/build/images/common/sprite.png?v=u95ab40e0)"; 
} 

Answer 2

あなたはSASSを使用しているとして、それはキャッシュの無効化に使用することができ、あなたのSASSファイル内のカスタム変数を定義して、任意の画像のURLパスにその変数を追加することが可能です。

変数は、現在のタイムスタンプへの参照を保持する必要があります。

module Sass::Script::Functions 
    def timestamp() 
     return Sass::Script::String.new(Time.now.strftime("%Y%m%d%H%M")) 
    end 
end 

次のように次にあなたがタイムスタンプにアクセスすることができます：

$cacheVersion = timestamp() 

.someClass { 
    background-image: url('your/path/file.jpg?cacheversion='$cacheVersion); 
} 

これを行うには

、あなたは次のように行うことができるタイムスタンプを、公開するcreate a new function in SASSする必要がありますコンパイルすると、次のようなものが生成されます：

.someClass { 
    background-image: url('your/path/file.jpg?cacheversion=201510091349'); 
} 

Answer 3

私は一口-SASSと@AJReadを使用していますミックスインをINGのことにコンパイル正しくconcantenate文字列、しない：ここで

background-image: url(+ "$url" + ?v= + u2f58eec1 +); 

は

MIXIN

私の場合には、おそらく

@mixin background-cache-bust($url) { 
    background-image: unquote('url(' + $url + '?v=' + unique_id() + ')'); 
}