自动刷新 CSS文件

时间:2022-07-15 21:14:47

自动刷新 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