Sublime Text3搭配LiveReload实现实时刷新

前言:

LiveReload是一款连接编辑器与浏览器解放F5的开发工具。LiveReload会监视文件系统的变化,一旦你保存文件,它就将浏览器刷新。所以当你改变保存一个CSS文件或图像,浏览器是即时刷新页面,无需你手动点击F5刷新。

一、下载安装插件LiveReload

在Chrome应用商店下载插件LiveReload,点击添加到Chrome后在菜单栏中显示一个有着空心圆的图标。


二、添加完后在扩展程序页面,将LiveReload设置为【允许访问文件网址


三、Sublime Text3下载LiveReload
方法一:通过在Sublime Text3中
Ctrl+Shift+P→ install livereload

方法二:下载github的包解压后放到Sublime Text的Packages下,将文件夹命名为LiveReload;下载地址:https://github.com/Grafikart/ST3-LiveReload 
Packages的文件位置可以点击Preference→Browse Packages…

四、配置并启用LiveReload

①配置LiveReload

Preference>Package Settings>LiveReload>Settings User,复制下面的代码粘贴保存
{
  "enabled_plugins": [
  "SimpleReloadPlugin",
  "SimpleRefresh"
   ]
}

②在Sublime中启用LiveReload

Ctrl+Shift+P →LiveReload: Enable/disable plugins, 按 Enter→在下拉列表找到 “Enable - Simple Reload” , 按 Enter

五、使用

点击 Chrome菜单栏中LiveReload 图标,中心的空心小圆圈会变成实心,表示已经启用LiveReload并连接成功。Sublime text3中的任何变化,Ctrl+S后,立即在Chrome中看到相应变化。


  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值