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

Спасибо

Ответы

Ответ 1

Используя ответ от @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)";
}

Ответ 2

Как вы используете SASS, можно определить пользовательскую переменную в ваших SASS файлах, которые могут быть использованы для перебора кеша, а затем добавить эту переменную к любым URL-адресам 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');
}

Ответ 3

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

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

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

Mixin

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