Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新

网上搜遍各方法,还是此法最简单~

下面为配置方法:

一、在 Sublime Text 3 中安装 View in Browser。

1、ctrl+shift+p

2、install

3、View in Browser

这就安装好View in Browser

接下来更改配置,默认是火狐,需要修改成Chrome

4,preferences->package setting->view in browser->setting-default,复制默认设置

打开preferences->package setting->view in browser->setting-user,粘贴配置,然后把最下面的"browser": "firefox"改成"browser": "chrome64"。

 

二、在sublime text3中安装插件liveReload

1、ctrl+shift+p

2、add repository,增加下面的url

https://github.com/NickWoodhams/LiveReload.git

3、ctrl+shift+p

4、install

5、liveReload

这样就在sublime中安装好liveReload插件了

接下来还需要设置,如下:

6、preferences->packge settings ->livereload->settings-default,

设置如下:

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

}

 

三、在Chrome中安装LiveReload插件

①更多工具->扩展程序->获取更多扩展程序中找到LiveReload然后添加就可以了。成功以后书签栏会有一个旋转圆形标志出现,中间为空心的。

最后还要设置插件允许访问文件网址

 

②如果上法不行还有下招(敲黑板!!!):

进入以下网址下载该插件

http://www.cnplugins.com/advsearch.php?q=livereload

Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新_第1张图片

 

下载安装完以后,更多工具->扩展程序,将插件拖入此处即可。

Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新_第2张图片

 

最后测试一下

写一个html文件,然后使用chrome运行,点击旋转圆圈中间的空心点变成实心说明连接成功。

什么?好像行不通……

好吧,咱还有后招~

 

 

  先启用浏览器中的LiveReload,点一下黑色圈圈,中心的小圆圈会变成实心,表示启用

  Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新_第3张图片

  有人说不能生效?是因为在Sublime Text里没有启动LiveReload,每次重新打开Sublime都需要启动,启动方法:Ctrl+Shift+P ==> LiveReload ==> enable/disable plug-ins ==> simple reload;

 

还有还有:开启 允许访问文件地址

Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新_第4张图片

 

 

参考文档:http://blog.csdn.net/chenhebing/article/details/50384314

                 https://www.cnblogs.com/wangjiajia/p/6004312.html

你可能感兴趣的:(配置那些事儿)