需要插件 
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的更多相关文章

  1. java可视化编程-eclipse安装windowbuilder插件(转载)

    原文地址:http://blog.csdn.net/jason0539/article/details/21219043 一直做在安卓用xml作界面,对于java的控件不熟悉,也不习惯用代码做UI尤其 ...

  2. 前端可视化开发-livereload

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...

  3. 重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程

    ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系,它继承了 MVVM 与 FRP 编程理念,在技术上有不少创新.本文从专利稿修改而来, ...

  4. 【编程工具】Sublime Text3的安装和常用插件推荐

    本人刚刚学习 HTML,曾经上网找过一些编写 HTML 的软件,但感觉都不太好,经过三挑四选下,最终我决定选择 Sublime Text3 这款软件来作为学习工具,上网找到了许多实用的插件,在这里给大 ...

  5. Atitit.可视化编程jbpm6 的环境and 使用总结...

    Atitit.可视化编程jbpm6 的环境and 使用总结... 1. Jbpm的意义 1 2. Jbpm6环境配置 2 2.1. Down 2 2.2. Install eclipse jbpm p ...

  6. 前端自动化神器LiveReload配合浏览器和less/sass使用方法

    前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...

  7. ubuntu安装sublime教程

    1.安装Sublime Text 3 及常用的神器插件 ①首先添加sublime text 3的仓库:sudo add-apt-repository ppa:webupd8team/sublime-t ...

  8. Python数据可视化编程实战pdf

    Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...

  9. [转]Centos 安装Sublime text 3

    本文简单介绍在CentOS上安装Sublime text 3, 转自:Centos 安装Sublime text 3 Step 1 :建立软件安装目录 # mkdir /opt # cd /opt S ...

随机推荐

  1. 【Unity】角色受伤后的闪烁（blink/flash）效果

    玩家受伤后,一段时间内快速闪烁.这里想要的闪烁效果是玩家快速的显隐切换效果,而不是玩家变白的情况. 快速切换玩家的显隐效果不能用SetActive修改角色物体本身的激活状态,因为玩家角色身上的其他脚本 ...

  2. WPF中Name和x:Name

    x:Name用来在XAML中表示一个制定对象的名称:可以通过它来访问XAML对应的资源: Name在.net的很多类中都存在,在WPF中可以和x:Name互换. 结果: 1. 在XAML中只存在x:N ...

  3. Go Revel - Session / Flash（会话与flash）

    ##Session / Flash 作用域 revel提供了两种cookies存储机制: // 一个加密签过的cookie (限制为4kb). // 限制: Key 中不能有冒号 type Sessi ...

  4. mybatis配置进阶

    结果集的列比resultMap多会报错么?不会,只映射resultMap中有的列. 结果集的列比resultMap少会报错么?不会,只映射结果集中有的列. 高级结果映射 resultMap      ...

  5. android 中遇到 imageView getWidth 始终为0 时 ，设置 setImageBitmap 的方法

    先说说我的遇到的问题: 1. 我在activity里写一个 fragment 2.这个fragment里有个 imageView ,用于显示图片. 我使用 asyncTask获得图片,并准备在这个im ...

  6. redis获取当前时间精确到微秒

    在redis取得当前时的方法为执行time命令 127.0.0.1:6382> time1) "1495780564"2) "894089" 第一行为以 ...

  7. 《快学 Go 语言》第 16 课 —— 包管理 GOPATH 和 Vendor

    到目前位置我们一直在编写单文件代码,只有一个 main.go 文件.本节我们要开始朝完整的项目结构迈进,需要使用 Go 语言的模块管理功能来组织很多的代码文件. 细数 Go 语言的历史发展,模块管理经 ...

  8. R语言包_dplyr_1

    有5个基础的函数: - filter - select - arrange - mutate - summarise - group_by (plus) 可以和databases以及data tabl ...

  9. Dijkstra 算法，用于对有权图进行搜索，找出图中两点的最短距离

    Dijkstra 算法,用于对有权图进行搜索,找出图中两点的最短距离,既不是DFS搜索,也不是BFS搜索. 把Dijkstra 算法应用于无权图,或者所有边的权都相等的图,Dijkstra 算法等同于 ...

  10. 基于jquery的ui选择之路

    选定: 主框架:jqueryUi tree:ztree grid:jqGrid layout:jquery.layout 原由: 还有其他demo,ajax实现等参看连接: 正在做的一个项目选择jqu ...