自動刷新 CSS文件
使用任何代碼工具碼 CSS,都是需要保存后再切換到瀏覽器按 F5 刷新查看效果,一次又一次,不管這個改動僅是一個小小的顏色。使用 CSSrefresh 后,改動 CSS 文件保存后,直接看瀏覽器就好了!
省去了: 切換到瀏覽器按 F5 刷新查看效果。這對碼 CSS 習慣不停刷新查看效果的開發人員來說絕對是利器,省卻的時間不是一點兩點。
CSSrefresh 是一個 JavaScript 庫,用來實現無需刷新頁面立即更換網頁樣式效果的功能,即插即用無需配置,只需要在頁面中引入該 JS 文件即可。
使用CSSrefresh是容易的
<head>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script type="text/javascript" src="js/cssrefresh.js"></script>
</head>
注意:js 要緊跟在 css 文件之下。
所以,我們就到官網下載這個 CSSrefresh.js文件,但是放在自己的IDE---Hbuilder工具里面不好使用
放在eclipse工具里面好使
再次證明了 “eclipse”的標准性能還是可以的!
Hbuilder是尚在發展狀態,有很多未完善的,不兼容這個插件。
遂,搜索,檢索,探測,詢問……終得出
修改源碼62行
/*return ( headers && headers[ 'Last-Modified' ] && Date.parse( headers[ 'Last-Modified' ] ) / 1000 ) || false;*/
為return ((new Date().getTime()+1000*60*60) / 1000) || false;這一行之后,就可以生效了
此版本可以放在任何開發環境,即可使用。
雙屏顯示下,左邊顯示瀏覽器效果,右邊編輯器,右邊一修改css文件,左邊瞬間生效。
cssrefresh.js版本是官網下載的,使用"eclipse"開發工具的可以使用這個版本
cssrefresh-hassan.js是我自己修改的版本,便於自己開發工具使用的!
以上博文參考,摘自網絡資源,自己修改的,便於自己使用。
參考鏈接:
http://www.oschina.net/p/cssrefresh
http://www.zhangxinxu.com/wordpress/2012/03/cssrefresh-js-automatically-refresh-css-files-%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0/
感謝hassan幫忙修改源碼!
詳情可參考鏈接的源碼附件
有我自己修改版本的demo
鏈接地址:http://files.cnblogs.com/files/leshao/cssrefresh%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0demo.rar