96 lines
4.9 KiB
HTML
96 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us" dir="ltr">
|
|
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
More cache-busting | Coding with Andrzej
|
|
</title>
|
|
<link rel="alternate" type="application/rss+xml" href="http://localhost:1313//index.xml" title="Coding with Andrzej">
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/main.css" />
|
|
|
|
|
|
<link rel="stylesheet" href="/css/syntax.css" />
|
|
|
|
|
|
<link rel="stylesheet" href="/css/defaults.css" />
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/js/main.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href=http://localhost:1313/><h1>Coding with Andrzej</h1></a>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li>
|
|
<a aria-current="true" class="ancestor" href="/posts/">Posts</a>
|
|
</li>
|
|
<li>
|
|
<a href="/tags/">Tags</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
<main>
|
|
|
|
|
|
<h1>More cache-busting</h1>
|
|
|
|
<time datetime="2024-11-15T22:33:10+01:00">November 15, 2024</time>
|
|
|
|
<p><strong>Well, that was easy.</strong></p>
|
|
<p>At the end of <a href="cache-busting">my last post</a>, I had successfully written a script to stop stale CSS from getting stuck in the browser cache. It was a rough-and-ready solution — mine usually are — but it did the job. The one optimization I wanted to make was to ensure that the cache gets busted <em>only</em> when there is fresh CSS, as opposed to on every build. I had expected to get a nice long blog post out of this, but it turns out to be a very easy job.</p>
|
|
<p>Here is the new build script:</p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="cp">#!/usr/bin/env bash
|
|
</span></span></span><span class="line"><span class="cl"><span class="cp"></span>
|
|
</span></span><span class="line"><span class="cl"><span class="nv">prev_mtime</span><span class="o">=</span><span class="k">$(</span>cat styles.mtime<span class="k">)</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nv">curr_mtime</span><span class="o">=</span><span class="k">$(</span>stat -c %Y css/styles.css<span class="k">)</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="c1">##has styles.css been modified?</span>
|
|
</span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="o">[[</span> <span class="nv">$prev_mtime</span> !<span class="o">=</span> <span class="s2">"</span><span class="nv">$curr_mtime</span><span class="s2">"</span> <span class="o">]]</span><span class="p">;</span> <span class="k">then</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="c1">##update .mtimes</span>
|
|
</span></span><span class="line"><span class="cl"> sed -i <span class="s2">"1s/.*/</span><span class="nv">$curr_mtime</span><span class="s2">/"</span> styles.mtime
|
|
</span></span><span class="line"><span class="cl"> <span class="nb">echo</span> <span class="s2">"file has been modified!"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="c1">##insert the commit id</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">COMMIT</span><span class="o">=</span><span class="s2">"</span><span class="k">$(</span>git rev-parse HEAD<span class="k">)</span><span class="s2">"</span>
|
|
</span></span><span class="line"><span class="cl"> sed -i <span class="s2">"s/css?=\w*/css?v=</span><span class="si">${</span><span class="nv">COMMIT</span><span class="si">}</span><span class="s2">/g"</span> index.html
|
|
</span></span><span class="line"><span class="cl"><span class="k">fi</span>
|
|
</span></span></code></pre></div><h2 id="what">What?</h2>
|
|
<p>The key here is the command <code>stat</code>, which gives access to a load of useful data from the Linux filesystem. In this case, we’re getting the time last modified. Try it for yourself and see what comes back.</p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="k">$(</span>stat -c %Y foo.file<span class="k">)</span>
|
|
</span></span><span class="line"><span class="cl"><span class="m">1731532468</span>
|
|
</span></span></code></pre></div><p>So all I have to do is write that unix timecode to a file (with our old friend <code>sed</code>), then I can compare this value to whatever gets returned at build time, and only insert the Git id if the CSS has changed. Job done!</p>
|
|
|
|
<div>
|
|
<div>Tags:</div>
|
|
<ul class="post-tags">
|
|
<li><a href="/tags/linux/">Linux</a></li>
|
|
<li><a href="/tags/css/">CSS</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</main>
|
|
<footer>
|
|
<p>Copyright 2024. All rights reserved.</p>
|
|
|
|
</footer>
|
|
</body>
|
|
</html>
|