码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-02-09 20:22:16      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:data   ati   perl   tran   ott   simple   tty   mod   中心   

需要插件 
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

标签:data   ati   perl   tran   ott   simple   tty   mod   中心   

原文地址:https://www.cnblogs.com/Yimi/p/8436053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!