Sublime Text3搭配LiveReload实现实时刷新

前言:

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

一、下载安装插件LiveReload

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

Sublime Text3搭配LiveReload实现实时刷新_第1张图片

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

Sublime Text3搭配LiveReload实现实时刷新_第2张图片

三、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中看到相应变化。


你可能感兴趣的:(前端开发)