1. 程式人生 > >CSS和js自動新增版本號

CSS和js自動新增版本號

昨天去winy那裡諮詢他網站裡css和js後面版本號的問題,我之所以想加這個功能是因為每次在A電腦修改的樣式或者js到了B電腦上就看不到效果,還得ctrl+f5才能看到,我承認我快取了網站的樣式和js,雖然可以讓使用者把一些常用的很少改動的樣式和js快取到本地,蛋似當我修改了樣式或者js後用戶看到的還是之前快取的那個版本,這是個很糟糕的問題,這樣不能讓各位童鞋們第一時間看到我搞出那些可愛效果,所以我決定也搞一個自動新增版本號的功能。

winy童鞋已經寫好了給wordpress的css和js加上時間戳這篇文章,我在想是不是有其他方法來實現這個功能,功夫不負有心淫,我找到了這個功能,automatically-version-your-css-and-javascript-files

,如果需要各位童鞋可以去看一下,相比較還是winy童鞋的字尾看著舒服,所以我也換成那個?v=123456的形式,吼吼,以後你們就可以第一時間看到偶所修改的功能了。

winy童鞋給出的方法貌似不需要修改.htaccess 檔案,而我找到的方法貌似需要修改.htaccess 檔案,你需要在.htaccess裡面加這段程式碼
#Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L]

然後在你的function.pnp里加上

<?php
function autoVer($url){
$path = pathinfo($url);
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}
?>


使用的時候這樣使用,裡面的引數填你的css或者js路徑地址
<link rel="stylesheet" href="<?php autoVer('/css/style.css'); ?>" type="text/css" />
<script type="text/javascript" src="<?php autoVer('/scripts/all.js'); ?>"></script>

有需求的童鞋可以試一下,兩種方法,兩種精彩,最後感謝一下winy童鞋分享他的方法。

相關推薦

CSSjs自動新增版本

昨天去winy那裡諮詢他網站裡css和js後面版本號的問題,我之所以想加這個功能是因為每次在A電腦修改的樣式或者js到了B電腦上就看不到效果,還得ctrl+f5才能看到,我承認我快取了網站的樣式和js,雖然可以讓使用者把一些常用的很少改動的樣式和js快取到本地,蛋似當我修

修復BUG:gulp自動新增版本修復對CSS中background:url()的匹配問題

前天說要找到一個完美的解決方案,今天發動了各路大神,總算是搞定了.問題描述: 修改gulp-rev-append外掛實現自動修改檔案中靜態資源連結新增md5版本號。但是前天有一點點很遺憾,對CSS中background:url()的匹配還存在一點點不足,url()必須帶單引

關於如何在make一個Linux下的C/C++工程時,自動新增版本、編譯日期等資訊

本篇的目的:在makefile裡,將系統當前的時間傳遞進待編譯的C/C++工程中,用以指示編譯執行的時間,以及版本資訊等。 不多說了,先來看效果: 當前時間:2017.01.20  0:29 編譯完成後執行效果: [email protected]:~/Desk

使用gulp為專案中的檔案自動新增版本之實踐思路

需要用到的Gulp外掛:1、gulp-rev2、gulp-rev-format3、gulp-rev-replace要實現html中增加版本號的效果:<link rel="stylesheet" href="/Public/css/lib/base.css?v=14780

gulp自動新增版本

1.安裝Gulp npm install --save-dev gulp 2.分別安裝gulp-rev、gulp-rev-collerctor npm install --save-dev gulp-

前端開發靜態檔案自動新增版本解決方案

前端開發中不可避免的會遇到快取問題,那麼如何使給這些靜態自動給新增版本號使修改後的內容立即生效呢?下面講下我找到的兩種方法: 一、通過獲取檔案最後修改時間 原理:通過伺服器端語言讀取檔案最後一次修改修改時間,然後將獲取的時間作為版本號。 以php為例: <?p

使用前端構建工具批量為頁面中引用的js檔案新增版本的歷程

近日遇到有客戶反應,頁面開啟顯示不正常,不能完全的顯示出頁面。細問之下才得知,原來是有一個js檔案修改了一個方法,但是上線後由於瀏覽器快取的原因,還是載入的舊js檔案,導致頁面顯示不正常了。給客戶解釋由於系統更新,需要強制重新整理才可以。這天陸續又有客戶反映遇到此問題,而有

Gulp開發:Gulp自動新增版本

"/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" =>

HTML中cssjs連結版本的用途

背景在搜尋引擎中搜索關鍵字 .htaccess 快取,你可以搜尋到很多關於設定網站檔案快取的教程,通過設定可以將css、js等不太經常更新的檔案快取在瀏覽器端,這樣訪客每次訪問你的網站的時候,瀏覽器就可以從快取中獲取css、js等靜態檔案,而不必從你的伺服器再次下載讀取,這樣

linux 程式、動態庫、靜態庫內部新增版本編譯時間

給程式和庫新增版本號和庫,有利於維護和升級。 當然你可以在檔名上體現,比如有個程式叫 yun,檔名寫為 yun_1.0.2,但這個需要每次手動維護,而且不能100%確保當前程式就是那個版本。所以,把版本號體現在程式內部,是一個不錯的選擇。 --------------------------

Linux 核心編譯 LOCALVERSION 配置(分析核心版本自動新增的"+")

因本人技術水平和知識面有限, 內容如有紕漏或者需要修正的地方, 歡迎大家指正, 也歡迎大家提供一些其他好的除錯工具以供收錄, 鄙人在此謝謝啦 1 問題發現 編譯主線 kernel 版本的時候發現, 的核心版本編譯成功後生成的版本號

html中的cssjs控制input,textarea文字框自動獲取焦點

方法:1:js控制自動獲取焦點 <html> <head> <script type="text/javascript"> function setFocus() { do

發布時一鍵添加html中的css標簽script標簽版本來防止瀏覽器緩存

ima file rip 但是 地址 問題 拉取 script asp 原文:發布時一鍵添加html中的css標簽和script標簽版本號來防止瀏覽器緩存 AppendFileVersion 是一個VSIX插件支持vs2015意以上版本 是我用來發布時一鍵添加html

html、cssjs註釋的規範用法

ont alt 推薦 pan 文件 strong 服務 可用 如何 成為專業的前端工程師!!! html註釋: <!--註釋內容--> css註釋: //註釋內容 單行註釋(不推薦使用,因為有的瀏覽器可能不兼容,沒有效果)/*註釋內容*/ 多

關於更新發布CSSJS文件的緩存問題

版本號 手動更新 解析 瀏覽器緩存 ext .com 關機 嚴重 新的 在Web應用程序大行天下的今天,我們程序員的工作大都基於B/S架構,B/S架構的優勢就在於可以及時(甚至隨時)更新頁面以及後臺邏輯,而不用通知客戶去手動更新客戶端。在這種環境下,是不是B/S架構

cssjs處理隔行換色的問題

ron -o user XML use type scala tex sha <html> <head> <meta charset="utf-8"> <met

wordpress插件開發掛載cssjs

blog ima class code -i _file__ res install mage define( ‘CSS‘, plugin_dir_url( __FILE__ ) . ‘css/‘ );//定義css根目錄 define( ‘JS‘, plugin

html、cssjs原生寫一個模態彈出框,順便解決父元素半透明子元素不透明效果

script javascrip z-index htm index 彈出 rgb 特性 radi 模態框: html部分: <!-- 按鈕 --> <button id="box" onclick="pop_box()">彈出框</

JavaScript動態加載CSSJS文件

tel path end js文件 document ava style pen bsp var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new

合並壓縮cssJs的方式

add 團隊 ali 腳本文件 解決 width 進行 文章 兩種 [文章作者:磨延城 轉載請註明原文出處: https://mo2g.com/view/74/ ] 本篇博客從減少瀏覽器加載外部資源連接數的思考角度著手,要想深入了解其他加快網頁顯示速度的原理,估計又得花不