Кэширование изображений, которые связаны внутри файлов 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, это сэкономило бы мне много времени. время и усилия.

Спасибо


css laravel sass gulp laravel-elixir
person AJReading    schedule 29.09.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Поскольку вы используете 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');
}
person Amo    schedule 09.10.2015
comment
Вероятно, лучше сделать миксин здесь и вернуть данную ссылку как url($link?v=$timestamp) - person Amelia; 09.10.2015
comment
На самом деле это хорошая идея. Я подошел к этому как к проблеме, которую нужно решить с помощью elixir или gulp, но на самом деле добавление метки времени будет означать, что она меняется каждый раз при компиляции SASS (что часто происходит во время разработки), но не имеет большого значения после последних изменений. развертываются в своей среде. - person AJReading; 09.10.2015

arrow_upward
3
arrow_downward

Используя ответ от @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)";
}
person AJReading    schedule 09.10.2015
comment
Было бы лучше изменить путь, а не использовать строку запроса, а затем переписать путь на веб-сервере. - person Hades; 07.03.2016
comment
Как это будет лучше? Браузеры все равно будут рассматривать параметры запроса как другой URL. Изменение пути и перезапись через сервер создает дополнительный уровень сложности, которого невозможно достичь с помощью одного только Sass. - person AJReading; 08.03.2016
comment
Метод строки запроса — не лучшая практика очистки кеша, и при определенных обстоятельствах он может дать сбой. Некоторые браузеры не видят другую строку запроса как другой файл, а некоторые программы (я слышал: Squid) не кэшируют файлы со строкой запроса. Кроме того, используя метод строки запроса, вы не позволяете веб-серверам, таким как IIS, обслуживать заголовки ETag, которые позволяют браузерам проверять действительность кеша, а не полагаться исключительно на дату/время истечения срока действия. - person Hades; 09.03.2016

arrow_upward
1
arrow_downward

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

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

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

Миксин

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