Cache busting images, которые связаны внутри файлов SASS

Question

Я довольно новичок в Laravel 5.0, но не PHP. Я играл с Elixir, чтобы скомпилировать SASS, скопировать изображения из моего каталога ресурсов и запустить их через функцию mix.version, чтобы предотвратить кеширование.

Это отлично работает для CSS, изображений и JavaScript; возможно ли иметь кеширование Elixir изображения, связанные в моем CSS/SASS? Уверен, что достаточно легко обновить изображения, но есть ли способ настройки CSS для отображения новых имен файлов?

Я обнаружил это: https://github.com/trentearl/gulp-css-url-adjuster , который позволяет добавлять параметр запроса в пути к файлу в файле CSS, так что половина проблемы решена. Я был бы очень рад использовать это, если бы можно было автоматически изменять параметр запроса каждый раз, когда запускается gulp.

Любые мысли о том, как это можно достичь, или если это возможно?

Причины, по которым я хотел бы сделать это, я постоянно разрабатываю свое приложение, и я использую большой лист спрайтов, который часто переупорядочивается, требование кэширования является обязательным требованием, и если оно может быть автоматическим при запуске gulp, что бы сэкономить у меня много времени и сил.

Благодаря

Answer 1

Использование ответа от m @Amo для вдохновения, решение, которое я закончил, было mixin, которое использует функцию unique_id() для генерации случайного значения. Это позволяет избежать необходимости настраивать функцию SASS, поэтому она проще и, как указывает @Amelia, тоже немного чище.

Mixin

@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 изображения путей.

Переменная просто должна содержать ссылку на текущую временную метку.

Чтобы сделать это, вам нужно create a new function in SASS выставить метку времени, которое может быть сделано следующим образом:

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); 
} 

When скомпилировано, это приведет к чему-то вроде:

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

Answer 3

Я использую GULP-дерзость и @AJRead ING подмешать не concantenate строка правильно, которая компилирует:

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

Вот что работает в моем случае

подмешать

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