如何利用 gulp 自動添加 JS 及 CSS 版號 (auto-versioning)，避免瀏覽器快取

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

一般來說，當使用者開過一個網站，他的瀏覽器會快取網站的 JS 及 CSS (就是記在瀏覽器的意思)。所以當一個使用者瀏覽了你的網站，過沒幾天你更新了 JS 或 CSS，但因為該使用者的瀏覽器記住了上次瀏覽的 JS / CSS，以至於你更新的 JS / CSS 不會在他的瀏覽器上生效。同理，也不會對其他最近瀏覽你網站的使用者生效。

每次更新時自動添加 JS 及 CSS 版號 (auto-versioning) 是一個避免瀏覽器快取的方法。前端工具 gulp 有一套完整的解法，本篇文章會依照 gulp-rev-replace 的做法一步一步來看。首先它使用 gulp-useref 分別合併 JS 及 CSS.

<!-- build:css css/combined.css -->
your css <link>...
<!-- endbuild -->

<!-- build:js scripts/combined.js -->
your js <script>...
<!-- endbuild -->

照上述 html 轉完後會變成

<link rel="stylesheet" href="css/combined.css"/>

<script src="scripts/combined.js"></script>

要注意的是 combined.css, combined.js 目前都還未壓縮，要使用 gulp-uglify 壓縮 JS 檔，使用 gulp-csso 壓縮 CSS 檔。接著使用 gulp-rev 去改目前 file stream 上的檔案名稱，例如 combined.js 會改成 combined-12345abcde.js 放在你的 destination folder，combined.css 也會被更名，這個步驟就是所謂的「上版號」。

最後再用 gulp-rev-replace 將 source html 中的 <link>, <script> 改成指向加上版號的 JS 及 CSS，例如

<link rel="stylesheet" href="css/combined-12345abcde.css"/>

<script src="scripts/combined-12345abcde.js"></script>

以上就是 gulp-rev-replace 文件裡介紹的自動上版號 (auto-versioning) 的流程。

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

延伸閱讀