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

时间: 2024-08-13 11:34:15

自动刷新 CSS文件的相关文章

在WebStorm里配置watcher实现编辑less文件时自动生成.css文件

1.安装 nodejs     //查看nodejs版本  node -v //查看npm版本  npm -v //全局安装less  npm install -g less 2.配置webStrom 添加external Tools parameters是默认地址的话  直接点insert就行 (Progrem 自己的安装位置   F:\NODE\node.exe) (parameters:C:\Users\Administrator\AppData\Roaming\npm) 添加watche

后台修改js或者css文件之后,客户端刷新但是无效的问题

前端开发会遇到一个问题:修改测试前端代码的时候,有时候修改了css或者js文件,但是前端刷新的时候却没有反应,不免让人感觉是不是修改错误,其实这有可能是客户端缓存问题.解决方法: 1)Ctrl+F5,清除浏览器缓存(等同于浏览器-->历史数据-->删除cookies) 2)在js或css后加版本号,这时候浏览器客户端会认为这是不同版本的js或者css文件,会自动重新刷新下载(浏览器会缓存下载页面js和css文件) 2.1)形如:.css?v=x  或者 css?version=x     &l

2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生成css进行编译,而不是借助于考拉工具;  顺便从头来一遍流程-- 建立如上图01所示的目录结构,层次明晰,便于日后管理. 快捷键进入当前文件夹,在此打开dos窗口输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法) 之后安装 cnpm,为了日后安装所需的包,速度更

gulp配置实现修改js、css、html自动刷新

写在前面: 本配置支持es6.less 1.首先 给出初始的目录结构 给出执行gulp后的目录结构 给出执行gulp --p后的目录结构 2.package.json里是一个写入.文件描述了npm包的相关配置信息(作者.简介.包依赖等)和所需模块. { "name": "gruntTest", "version": "1.0.0", "description": "", "ma

gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc

修改文件后浏览器自动刷新解决方案

现有编程工具的自动刷新解决方案 其实有很多工具可以做到文件一改变,浏览器自动刷新,其实这样体验也是最好的,可是由于一些原因,这些工具并不能解决所有工作场景的需求. 由于这不是本文的主要内容,只列出一些可以实现自动刷新的工具,没有进行详细展开,大家可以自行去研究下. 在Sublime下有一个插件叫做LiveStyle可以实现修改CSS后自动刷新,但是每一个CSS文件都要手动配置,不够智能.需要安装Chrome插件:Emmet LiveStyle. JetBrains公司的IDEA.WebStorm

让浏览器重新下载css文件,解决不刷新缓存的问题

网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息 它的作用有:1.作为版本号,让自己方便记忆.查找:2.作为修改标签,让浏览器重新下载新文件. 新浪.facebook上用到的: http://xxx.xxx.cn/css/common/index.css?version=20121226142105 http://tjs.sjs.xxx.cn//static/js/top.js?vers

xcode自动刷新resource下的文件

修改resource下的lua或者ccbi文件时,xcode并不会察觉到,所以需要手动清理xcode缓存和模拟器缓存,开发效率比较低下. 通过以下步骤可以实现自动刷新resource下的文件,且无需手动清理缓存或者clean. 适用于xcode-5.0.2 1.选中xcode项目 2.选择build phase 3. 添加run script 4. 在run script下添加如下命令() find ${SRCROOT}/../../RisingClient/Resources/scripts

为js和css文件自动添加版本号

web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和