Cache busting immagini che sono collegate all'interno dei file SASS

Question

Sono abbastanza nuovo per Laravel 5.0, ma non per PHP. Ho giocato con Elixir per compilare il mio SASS, copiare immagini dalla mia directory delle risorse ed eseguirle attraverso la funzione mix.version per impedire la memorizzazione nella cache.

Questo funziona perfettamente per CSS, immagini e JavaScript, tuttavia; è possibile avere Elixir cache-bust delle immagini collegate anche nel mio CSS/SASS? Certo, è abbastanza facile per la versione delle immagini, ma c'è un modo per regolare il CSS in modo che rifletta i nuovi nomi di file?

Ho scoperto questo: https://github.com/trentearl/gulp-css-url-adjuster che consente di aggiungere un parametro di query ai percorsi di file in un file CSS, in modo che la metà del problema sia risolto. Sarei abbastanza felice di usarlo se fosse possibile cambiare automaticamente il parametro di query ogni volta che gulp viene eseguito.

Qualche idea su come raggiungere questo obiettivo o se è addirittura possibile?

Le ragioni vorrei fare questo è sono costantemente in via di sviluppo la mia app e io uso un grande foglio sprite che è spesso riarrangiato, busting della cache è un requisito, e se potesse essere automatico quando viene eseguito gulp che avrebbe risparmiare ho un sacco di tempo e impegno.

Grazie

Answer 1

Utilizzando la risposta di m @Amo per l'ispirazione, la soluzione che ho utilizzato è stata una mixin, che utilizza la funzione unique_id() per generare un valore casuale. Questo evita di dover definire una funzione personalizzata SASS, quindi è più semplice e, come ha sottolineato @Amelia, anche un po 'più pulita.

Il mixin

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

Esempio

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

Risultato

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

Answer 2

Come stai usando SASS, è possibile definire una variabile personalizzata nei file SASS, che potrebbe essere utilizzato per il busting della cache, e quindi aggiungere tale variabile per tutti i percorsi immagine URL.

La variabile deve solo contenere un riferimento al timestamp corrente.

Per fare questo, è necessario create a new function in SASS per esporre un timestamp, che può essere fatto come segue:

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

Quindi è possibile accedere al timestamp come segue:

$cacheVersion = timestamp() 

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

Quando compilato, questo produrrà qualcosa come:

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

Answer 3

sto usando gulp-sass e @AJRead ing mixin non si stringa concantenate correttamente, che compila a:

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

Ecco ciò che funziona nel mio caso

Mixin

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