問題描述
我對 Laravel 5.0 相當陌生，但對 PHP 不是.我一直在使用 Elixir 來編譯我的 SASS，從我的資源目錄復制圖像并通過 mix.version 函數(shù)運行它們以防止緩存.
I'm fairly new to Laravel 5.0, but not to PHP. I've been playing around with Elixir to compile my SASS, copy images from my resource directory and run them through the mix.version function to prevent caching.
不過，這對 CSS、圖像和 JavaScript 非常有用；是否也可以讓 Elixir 緩存在我的 CSS/SASS 中鏈接的圖像?當然，對圖像進行版本控制很容易，但有沒有辦法調整 CSS 以反映新的文件名?
This works great for CSS, images and JavaScript, however; is it possible to have Elixir cache-bust the images linked in my CSS/SASS as well? Sure it's easily enough to version the images but is there a way of adjusting the CSS to reflect the new filenames?
我發(fā)現(xiàn)了這個:https://github.com/trentearl/gulp-css-網(wǎng)址調整器它允許您將查詢參數(shù)附加到 CSS 文件中的文件路徑，這樣就解決了一半的問題.如果可以在每次 gulp 運行時自動更改查詢參數(shù)，我會很樂意使用它.
I discovered this: https://github.com/trentearl/gulp-css-url-adjuster which allows you to append a query parameter to the file paths in a CSS file, so that is half of the problem solved. I would be quite happy to use this if it were possible to automatically change the query parameter each time gulp runs.
有什么想法可以實現(xiàn)，或者是否有可能?
Any thoughts on how this can be achieved, or if it is even possible?
我想這樣做的原因是我一直在開發(fā)我的應用程序，并且我使用一個經常重新排列的大型精靈表，緩存破壞是一項要求，如果它可以在 gulp 運行時自動運行，那將節(jié)省我很多時間和精力.
The reasons I would like to do this is I'm constantly developing my app and I use a large sprite sheet which is often rearranged, cache busting is a requirement, and if it could be automatic when gulp runs that would save me a lot of time and effort.
謝謝
推薦答案
使用@Amo 的答案作為靈感，我最終使用的解決方案是一個 mixin，它利用了 unique_id() 函數(shù)生成隨機值.這避免了必須定義自定義 SASS 函數(shù)，因此它更簡單，正如@Amelia 指出的那樣，也更簡潔.
Using the answer from @Amo for inspiration, the solution I ended up using was a mixin, which makes use of the unique_id() function to generate a random value. This avoids having to define a custom SASS function, so it's simpler and as @Amelia pointed out, a bit cleaner too.
混入
@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 文件中鏈接的破壞圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！