商業,創業,業務開發,自媒體經營,生活美食,時事分析。
這是我的 FB粉專 以及 IG,我也滿常使用 Threads,歡迎大家追蹤互動~
在創業、職涯、人生的路上,希望大家一起陪伴與成長。
圖片來源 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粉專 以及 IG,我也滿常使用 Threads,歡迎大家追蹤互動~
在創業、職涯、人生的路上,希望大家一起陪伴與成長。