Obrazy z pomijania pamięci podręcznej, które są połączone w plikach SASS

Question

Jestem całkiem nowy w Laravel 5.0, ale nie w PHP. Bawiłem się z Elixirem, aby skompilować mój SASS, kopiować obrazy z mojego katalogu zasobów i uruchamiać je poprzez funkcję mix.version, aby zapobiec buforowaniu.

Działa to jednak świetnie na CSS, obrazy i JavaScript; czy możliwe jest posiadanie eliksirów z pamięci podręcznej obrazów połączonych z moim CSS/SASS? Z pewnością łatwo jest zmienić wersję obrazów, ale czy istnieje sposób na dostosowanie CSS do odzwierciedlenia nowych nazw plików?

Odkryłem: https://github.com/trentearl/gulp-css-url-adjuster , który umożliwia dołączenie parametru zapytania do ścieżek plików w pliku CSS, więc jest to połowa problemu rozwiązana. Byłbym bardzo szczęśliwy z tego, gdyby można było automatycznie zmienić parametr zapytania za każdym razem, gdy uruchamiał się.

Jakieś przemyślenia na temat tego, w jaki sposób można to osiągnąć, a może nawet jest to możliwe?

Powodem, dla którego chciałbym to zrobić, jest to, że ciągle rozwijam swoją aplikację i używam dużego arkusza sprite, który jest często rearanżowany, wymazywanie pamięci podręcznej jest wymogiem, i czy może być automatyczne, gdy przechodzimy przez przechwałki, co może zaoszczędzić mi dużo czasu i wysiłku.

Dzięki

Answer 1

Korzystanie z odpowiedzi m @Amo dla inspiracji, rozwiązanie, które w końcu wykorzystałem, to mixin, które wykorzystuje funkcję unique_id() do generowania losowej wartości. W ten sposób unika się konieczności definiowania niestandardowej funkcji, więc jest to prostsze i jak zauważyła @Amelia, nieco bardziej przejrzysta.

wstawka

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

Przykład

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

Wynik

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

Answer 2

Jak używasz Sass, to można zdefiniować niestandardową zmienną w plikach Sass, które mogłyby być wykorzystane do pomijania pamięci podręcznej, a następnie dołączyć do tej zmiennej żadnej ścieżki URL obrazu.

Zmienna musi tylko zawierać odniesienie do bieżącego znacznika czasu.

Aby to zrobić, musisz create a new function in SASS aby odsłonić znacznik czasu, który można zrobić w następujący sposób:

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

Następnie można uzyskać dostęp do datownika, co następuje:

$cacheVersion = timestamp() 

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

When skompilowany, będzie produkować coś takiego:

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

Answer 3

mi stosując łykiem-Sass i @AJRead ing wstawek nie concantenate ciąg poprawnie, który kompiluje do:

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

Oto, co działa w moim przypadku

mixin

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