Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器

时间:2024-05-31 10:35:56

我们在使用sublime时一般需要修改html代码时要保存退出然后刷新浏览器,这样就显得有点麻烦。
火狐浏览器和sublime都提供了livereload插件,网络上大部分都是说配置Chrome,火狐的配置很少,不过其实也差不多的步骤。火狐配置比谷歌简单一点。

下面我来介绍一下具体步骤:

1.首先确定你的sublim是否安装了Package Control,如果没有安装,你需要为sublime text安装Package Control组件

先查看Preferences -->package Control是否存在
如果不存在:
可参考安装Package Control
验证是否安装成功:在菜单->preferences->中看到Package Settings和package control选项就说明安装成功。

2.在sublime中安装livereload

(1)使用快捷键Ctrl+Shift+P打开命名框

输入“install”,下方就会提示“Package Control:install package”
如图:Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
选择第一个或者敲回车。
此时会看到窗口左下角会显示:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器= 会来回滚动。
稍等片刻后会弹出如下搜索框:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器

(2)在搜索框中搜索 livereload,敲回车等待安装

(这种方式为自动安装,如果不成功,就在网上下载sublime的livereload压缩包,将插件解压在packages下)
步骤:点击Preferences选项,选择第一个选项BrowsePreferences,会打开Package文件目录,将下载好的livereload解压在文件中如图:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器

(3)在sublime中配置live

Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
打开settings选项
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
加入   “SimpleReloadPlugin”,
           “SimpleRefresh”

(4)启用livereload

在 Preferences 中的Livereload中找到 plugins点击,回车出现如图:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
敲击回车, 搜索 simple会出现如图:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
选择第一个,这样就启用成功(
有时候第一个和浏览器链接时可能会没有效果,可以试试选第二个)

3.在Firfox中添加livereload插件

(1)在浏览器左上找到如图标志

Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器

(2)安装livereload插件

打开添加组件Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
搜索livereload插件Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
选择如图插件:
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
安装完后后,会在扩展中显示
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器

(3)启用livereload

打开后会在浏览器左上角出现图标
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
单机此图标变为
Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
说明启用成功。

注:火狐浏览器会自动匹配到sublime的livereload