Кэширование изображений, которые связаны внутри файлов SASS

Я довольно новичок в 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, то это спасет меня много время и усилия.

Спасибо

Источник

3 ответа

Решение

Используя ответ @Amo для вдохновения, я решил использовать mixin, который использует unique_id() функция для генерации случайного значения. Это избавляет от необходимости определять обычай 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)";
}
Источник

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

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

Для этого вам нужно создать новую функцию в 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);
}

При компиляции это будет производить что-то вроде:

.someClass {
    background-image: url('your/path/file.jpg?cacheversion=201510091349');
}
Источник

Я использую gulp-sass, а @AJReading mixin не правильно объединяет строку, которая компилируется в:

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

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

Mixin

@mixin background-cache-bust($url) {
   background-image: unquote('url(' + $url + '?v=' + unique_id() + ')');
}
Источник
Другие вопросы по тегам