天天看点

Sublime text3配置LiveReload 实时预览、无需刷新

Tip : LiveReload是很棒的插件,可以在浏览器中实时预览,但是在Sublime text3里,从Package Control中安装的LiveReload是无法使用的,但是可以选择手动安装解决。

LiveReload插件下载

Sublime端

Github上的LiveReload for Sublime text3的地址: ​​LiveReload​​ ,两种方式安装:

方法一:

选择DownloadZip,将解压的文件夹放在Packages文件夹(Preference>Browse Packags)重启ST3

方法二:

直接clone到Packages文件夹。

//适用于Linux  OSX  

//Windows可以通过Git操作

//进入Packages目录下

rm -rf LiveReload  
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload      

浏览器端

我用的是chrom,在应用商店可以直接找到LiveReload,安装。

安装之后会出现这个图标。

配置

方法一:

Preference>Package Settings>LiveReload>Settings User

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"      

方法二:

1. ctrl+shift+p
2. LiveReload: Enable/disable plugins
3. Enable - SimpleReload      

实时预览

把html文件在浏览器中打开,点击一次图标中间的圆环变成原点就代表可以实时预览了。ST3中的文件保存一次,浏览器就会刷新一次,实时预览,很方便!

参考:

​​http://chedanji.com/sublime-text3-livereload/​​