gulp js css auto versioning
前端工程

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

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~

圖片來源 https://github.com/gulpjs/gulp

一般來說,當使用者開過一個網站,他的瀏覽器會快取網站的 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公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~