Cache-Busting-Bilder, die in SASS-Dateien verknüpft sind

Question

Ich bin ziemlich neu zu Laravel 5.0, aber nicht zu PHP. Ich habe mit Elixir herumgespielt, um meine SASS zu kompilieren, Bilder aus meinem Ressourcenverzeichnis zu kopieren und sie über die Funktion mix.version auszuführen, um Zwischenspeichern zu verhindern.

Dies funktioniert jedoch hervorragend für CSS, Bilder und JavaScript; ist es möglich, dass Elixir auch die in meiner CSS/SASS verlinkten Bilder cachebastet? Sicher, es ist einfach genug, die Bilder zu versionieren, aber gibt es eine Möglichkeit, das CSS so anzupassen, dass es die neuen Dateinamen wiedergibt?

Ich entdeckte dies: https://github.com/trentearl/gulp-css-url-adjuster , die Sie einen Abfrageparameter an die Dateipfade in einer CSS-Datei anhängen können, so dass die Hälfte des Problems gelöst ist. Ich würde mich sehr freuen, dies zu verwenden, wenn es möglich wäre, den Abfrageparameter jedes Mal automatisch zu ändern, wenn der Schluck ausgeführt wird.

Irgendwelche Gedanken darüber, wie dies erreicht werden kann, oder wenn es überhaupt möglich ist?

Die Gründe, warum ich das tun möchte, ist, ich entwickle ständig meine App und ich benutze ein großes Sprite-Blatt, das oft neu angeordnet wird, Cache-Busting ist eine Voraussetzung, und wenn es automatisch sein könnte, wenn Schluck läuft würde das sparen Ich habe viel Zeit und Mühe.

Dank

Answer 1

Verwenden der Antwort her m @Amo zur Inspiration, die Lösung, die ich am Ende benutzte, war ein mixin, der die unique_id() Funktion verwendet, um einen zufälligen Wert zu erzeugen. Dies vermeidet, eine benutzerdefinierte SASS Funktion zu definieren, so dass es einfacher ist und @ @ Amelia wies darauf hin, ein bisschen sauberer auch.

Die mixin

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

Beispiel

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

Ergebnis

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

Answer 2

Wie Sie SASS verwenden, ist es möglich, eine benutzerdefinierte Variable in der SASS Dateien zu definieren, die für den Cache verwendet werden könnten, Zerschlagung und dann diese Variable auf ein beliebiges Bild URL-Pfade anhängen.

Die Variable muss nur einen Verweis auf den aktuellen Zeitstempel enthalten.

Um dies zu tun, werden Sie zu create a new function in SASS benötigen einen Zeitstempel zu belichten, die wie folgt durchgeführt werden kann:

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

Dann Sie den Zeitstempel zugreifen können wie folgt:

$cacheVersion = timestamp() 

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

Wenn kompiliert, wird dies etwas wie produzieren:

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

Answer 3

Ich bin mit großen Schluck-Sass und @AJRead mixin ing nicht concantenate Zeichenfolge richtig, die kompiliert:

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

Hier ist, was in meinem Fall

Mixin

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