前端可视化编程:liveReload安装,sublime 3

Posted 缘琪梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端可视化编程:liveReload安装,sublime 3相关的知识,希望对你有一定的参考价值。

需要插件 
sublime text3:View in Browser;LiveReload

chrome:liveReload

配置方法

一:sublime text3

sublime 3下载地址:

http://download.csdn.net/download/reggergdsg/9541966

1、在sublime text3安装插件 view in browser

注意(安装插件之前先安装Package Control: 
http://blog.csdn.net/weixin_36401046/article/details/52880000, 
http://devework.com/sublime-text-3-package-control.html

ctrl+shift+p
  • 1
  • 1
输入install package回车
  • 1
  • 1

技术分享图片

view in browser
  • 1
  • 1

2、安装成功后,修改默认的浏览器:

preferences->package setting->view in browser->setting default
  • 1
  • 1

把firefox改为chrome64

技术分享图片

3、在sublime text3安装插件liveReload

ctrl+shift+p
  • 1
  • 1
输入install package回车
  • 1
  • 1
liveReload
  • 1
  • 1

技术分享图片

4、liveReload配置

preferences -> Packge Settings -> LiveReload -> Settings - Default
  • 1
  • 1

技术分享图片

输入以下内容保存即可

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

二、 chrome浏览器安装liveReload插件

1、

方法一:进入chrome插件中心,搜索liveReload,安装即可。
  • 1
  • 1

技术分享图片

方法二:如果进不到插件中心,下载安装包安装到chrome浏览器:
  • 1
  • 1

http://download.csdn.net/download/weixin_36401046/9659158

2、进入chrome扩展程序页面,将livereload中的允许访问文件网址打上勾

技术分享图片

三、测试 
重新打开sublime text3,重新启动chrome。 
在sublime text3编辑一个测试html文件,

<html>
<meta charset="UTF-8">
<body>
<h1>开心</h1>
<p>自动刷新</p>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

按 ctr+alt+v 在chrome浏览器中运行,编辑器下方出现livereload提示,并且点击chrome浏览器的livereload图标中间小圆点由虚变实,说明配置成功。

技术分享图片

重点内容:只需要在sublime text3里编辑代码,按 ctr+s 保存,即可在chrome里面看到实时更新。

技术分享图片

如果没有成功自动刷新,把以下走一遍:

1、找到packages文件夹

技术分享图片

技术分享图片

2、从https://github.com/Grafikart/ST3-LiveReload 下载压缩包到本地

3、解压, 重命名为LiveReload,拷贝到packages中

参考文献:http://blog.csdn.net/neet007/article/details/51694643






以上是关于前端可视化编程:liveReload安装,sublime 3的主要内容,如果未能解决你的问题,请参考以下文章

前端可视化开发--liveload

Livereload介绍

如何在 Sublime Text 3 上安装 LiveReload?

HTML5技术分享:前端自动化工具推荐

livereload

八. 实时更新插件 livereload