Tip

LiveReload是很棒的插件,可以在浏览器中实时预览,但是在Sublime text3里,从Package Control中安装的LiveReload是无法使用的,但是可以选择手动安装解决。


LiveReload插件下载

Sublime端

Github上的LiveReload for Sublime text3的地址:LiveReload,两种方式安装:

方法一:

选择DownloadZip,将解压的文件夹放在Packages文件夹(Preference>Browse Packags)重启ST3

方法二:

直接clone到Packages文件夹。


//适用于Linux OSX //Windows可以通过Git操作 //进入Packages目录下 rm -rf LiveReload
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload

浏览器端

我用的是chrom,在应用商店可以直接找到LiveReload,安装。

安装之后会出现这个图标。

配置

1. ctrl+shift+p
2. LiveReload: Enable/disable plugins
3. Enable - SimpleReload

实时预览

把html文件在浏览器中打开,点击一次图标中间的圆环变成原点就代表可以实时预览了。

ST3中的文件保存一次,浏览器就会刷新一次,实时预览,很方便!

参考:

http://chedanji.com/sublime-text3-livereload/

http://stackoverflow.com/questions/25886011/how-do-i-install-livereload-sublime-text-3


Sublime text3配置LiveReload的更多相关文章

  1. Sublime text3配置LiveReload 浏览器即时刷新

    1.在sublime控件台 install livereload插件(缺点:每次重新打开Sublime都需要启动) 2.配置Preference > Package Settings > ...

  2. 【前端】Sublime text3 插件LiveReload 实现实时预览

    1.首先要安装插件LiveReload Sublime text3. 菜单 preferences->packages control,输入install.. 回车,输入LiveReload回车 ...

  3. Sublime text3 插件LiveReload 实现实时预览

    1.首先要安装插件LiveReload Sublime text3. 菜单 preferences->packages control,输入install.. 回车,输入LiveReload回车 ...

  4. Sublime Text3配置Lua运行环境

    Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...

  5. MAC系统下Sublime Text3 配置Python3详细教程

    MAC系统下Sublime Text3 配置Python3详细教程(亲测有效) https://blog.csdn.net/weixin_41768008/article/details/798590 ...

  6. Sublime Text3 配置Python3编译环境

    Sublime Text3 配置Python编译环境 进入Sublime Text3 ,然后选择菜单:工具(T)==>编译系统(U)==>新编译系统... 把上面的代码换成如下代码: &q ...

  7. Sublime Text3 配置 NodeJs 环境

    前言 大家都知道,Sublime Text 安装插件一般从 Package Control 中直接安装即可,当我安装 node js 插件时候,直接通过Package Control 安装,虽然插件安 ...

  8. sublime Text3配置及快捷键、插件推荐总结

    一.基础 1.重要文档: sublime Text3官方文档中文版:http://feliving.github.io/Sublime-Text-3-Documentation/ sublime Te ...

  9. sublime text3 配置使用

    前言 sublime text3 是一款优秀的代码编辑器,很多好用的功能让我成为其忠实用户. 流程 1.安装完成后首先配置package control,把下面的代码复制到sublime 的控制台: ...

随机推荐

  1. log4net截取配置错误信息,(验证配置信息是否配置正确)

    在</system.web>之后 <!--log4错误日志配置:开始--> <system.diagnostics> <trace autoflush=&qu ...

  2. Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置

    最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性 第一:就是JDK路 ...

  3. Android-应用的本地化及知识拓展之配置修饰符

    步骤很简单,只需要两步: 1.创建带有目标语言的配置修饰符的资源子目录 2.将可选资源放入该目录下,android系统会自动处理后续工作 在这里我们需要讲解一下配置修饰符. 中文的配置修饰符:-zh, ...

  4. grunt之入门实践

    grunt 是基于nodejs的前端项目管理工具,凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出. 确保先安装了nodejs 为了方便使用Grunt,应该在全局范围内安装Grunt的命令行接口( ...

  5. 线段树:Segment Tree(单点修改/区间修改模板) C++

    线段树是非常有效的数据结构,可以快速的维护单点修改,区域修改,查询最大值,最小值等功能. 同时,它也很重要.如果有一天比赛,你卡在了一道线段树模板题目上,这就真的尴尬了.不过,随着时代的进步,题目也越 ...

  6. Mysql中natural join和inner join的区别

    假设有如下两个表TableA,TableB TableA TableB Column1 Column2 Column1 Column3 1 2 1 3 TableA的Column1列名和TableB的 ...

  7. PHP学习系列(1)——字符串处理函数(5)

    31.ord() 函数返回字符串第一个字符的 ASCII 值. 语法:ord(string) 例子 <?php echo ord("h"); echo ord("h ...

  8. haslayout引起的IE6 :hover失效

    大家都知道IE6之支持<a>标签的:hover为了,但是通常在做实际效果的时候<a>标签 :hover在IE6下会失效, 看代码: [code="html" ...

  9. ASP.NET MVC 4.0的Action Filter

    有时候你想在调用action方法之前或者action方法之后处理一些逻辑,为了支持这个,ASP.NET MVC允许你自定义创建action过滤器.Action过滤器是自定义的Attributes,用来 ...

  10. BIOS讲解

    首先  BIOS其实没什么神奇的 就是  Bisic input/output System,所以基本输入输出系统是一块装入了启动和自检程序的EPROM或EEPROM集成块,实际上它是被固化在计算机R ...