今天做一个活动页面,普通的切图再添加点js效果之类的页面。来来回回地切窗口,然后将编辑器与浏览器,左一半,右一半放在windows窗口上。但调整样式的时候发现还是得不停地点一下浏览器F5一下。不甚其烦!!
我知道有许多的工具可以做到浏览器的自动刷新,不过都比较懒去得去做配置,另外我个人也非常讨厌在项目中添加一些辅助工具而产生多余的文件,比如现在做的一个活动页:
|-- active
|-- index.html
|-- css/index.css
|-- js/index.js
|-- img/*.png
就这么一个80%都是纯静态的页面,最多就一个提交之类的交互,而且是通过ajax进行交互的。通过利用一些构建项目的工具如gulp、webpack-dev-server可以达到自动刷新。但是,本身就简单的目录加了许多辅助的文件,感觉项目就** “重” **了起来了。
百度了一下,找了一些合适的工具,可以让你的目录干净无污染。
F5免刷新工具
使用F5工具,不需要什么复杂的步骤,直接到官网上找到软件,下载安装之后,将你的项目目录拖进去,然后在目录中点开你的index.html文件则可以实现自动刷新。
此F5工具有时可能不太灵,工作久时有可能不会自动刷新,你得关掉页面,再工具里面去点开index.html文件。
工具的下载与安装方法:F5
使用sublime的LiveReload插件
如果你使用sublime工具,可以使用LiveReload插件实现浏览器自动刷新。
** step1. **
如果你使用chrome浏览器,你可能得使用vpn安装浏览器插件扩展LiveReload,如果是火狐浏览器,在右上角的打开菜单项-开发者-获取更多工具中,搜索LiveReload,点添加到Firefox就OK。
安装完成之后,在浏览器的工具栏中会显示一个livereload的图标,表示已经安装完成。
** step2. **
安装sublime插件LiveReload: ctrl + shift + p
,输入install package
,再输入LiveReload
,安装完成。
有时,安装不成功,可以直接下载包再手动安装,先去github上下载源代码ST3-LiveReload,解压包文件到
\Sublime Text 3\Data\Packages
对应的目录中即可。
** step3. **
重启浏览器与sublime text,Preference > Package Settings > LiveReload > Settings User
添加配置:
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
直接在浏览器中打开index.html文件,在sulblime中选中Preference > Package Settings > LiveReload > plugins > Enable/disable plugins
。
或者也可以这样:ctrl + shift + p
,输入LiveReload: Enable/disable plugins
在浏览器中,点击那个圆形图标,空心圆变成实心圆啦!大功靠成,解放双手,可以开心地coding啦!