这两天倒腾编辑器,atom实在太大了,还是sublime好用

  以前一直用sublime2, 然后更新到sublime3, 然后把一些必要的插件安装了一下:liveload(自动刷新);

  package control

  首先给sublime添加了一个package control的插件, sublime2和sublime3安装package control 的方式不同, 查看这里;

  安装LiveReload

  然后通过快捷键(ctrl+shift+p), 会出现下面这个界面:选择 package control : install package :

    

  sublime会卡一下:然后又会跳出另外一个输入框,在输入框中输入:liveReload, 然后点击过滤出来的选项, 点击机会安装livereload;

    

  livereload安装完毕以后会跳出一个安装完毕的界面。

  enable plugins

  接着再选择Preferences->package setting->LiveReload->Plugins->enable/disable plugins ,启动LiveReload, 然后重新启动sublime;

  浏览器安装LiveReload插件:

  打开google-chrome的应用中心,搜索LiveReload, 并把应用添加到chrome:

    

  允许访问文件网址

  安装完毕以后,打开扩展程序中心, 把LiveReload的允许访问文件网址选项加上:

  

  此时sublime和chrome浏览器插件都安装好了。

  最后一步, 启用插件

  最后一步是通过sulime选择在浏览器中打开html文件, 然后再点击浏览器上的插件按钮

  此时按钮会变成实心的:

  

  如果查看网页源码,会发现网页源码下被添加了一个script标签:

  现在,只要我们修改对应的html文件并ctrl+s保存文件, 对应的浏览器界面会自动刷新;

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

QQ:287101329

微信:18101055830

sublime3安装liveload,实现前端自动F5刷新html界面的更多相关文章

  1. Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能

    在之前的公司,我们前端使用webpack构建项目,项目构建完成后,我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上,这种方式虽然是可以,但是最近面试的时候,人家会问我前端如何部署项目 ...

  2. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  3. 解决Silverlight F5刷新问题

    最近在做一个SL的项目,做完后,遇到一个F5刷新的问题,本人也是第一次接触接触SL项目,记得再ASP.NET浏览器的缓存会自动保存最后一次的浏览记录的. 所以就在网上到处找资料,可惜运气不好,都没找到 ...

  4. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  5. sublime3 安装markdown插件

    sublime3 安装markdown插件 第一步安装package control 自动安装package control 手动安装package control 安装具体的markdown相关的p ...

  6. websocket实现数据库更新时前端页面实时刷新

    websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...

  7. jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等

    禁用鼠标右键菜单栏 $("body").bind("contextmenu", function(event) { return false; }); 禁用快捷 ...

  8. C# webbrowser实现真正意义上的F5刷新

    关于webbrowser的刷新在C#中有提供方便的方法: webbrowser.refresh(); 但是有时候会发现,不给力啊 那怎么办? 还有一招: webBrowser1.Document.Ex ...

  9. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP ...

随机推荐

  1. Android中通过线程实现更新ProgressDialog(对话进度条)

    作为开发者我们需要经常站在用户角度考虑问题,比如在应用商城下载软件时,当用户点击下载按钮,则会有下载进度提示页面出现,现在我们通过线程休眠的方式模拟下载进度更新的演示,如图(这里为了截图方便设置对话进 ...

  2. sql tuning advisor使用

    DB tuning advisor是创建优化任务,对某些sql数据库进行分析,并尽量给出优化建议的一个强大的数据库工具. 自己平时几乎没用过这玩意,所以来测一测用法,其实对于一些sql一筹莫展的时候跑 ...

  3. mysql数据库乱码解决方法之一

    在前端页面向数据库中插入带中文字符的数据,到数据库时中文都变成了"?",其中jsp页面已经是设为utf-8编码的,建数据库时选择的编码也是utf-8; 1.解决的办法是在连接数据库 ...

  4. sql server2014不允许保存更改。阻止保存要求重新创建表的更改

    错误描述: SQL Server2014在原有的数据表中修改表结构后,保存数据表,提示错误如下: 不允许保存更改.您所做的更改要求删除并重新创建以下您对无法重新创建的表进行了更改或启用了"阻 ...

  5. 基于php基础语言编写的小程序之计算器

    基于php基础语言编写的小程序之计算器 需求:在输入框中输入数字进行加.减.乘.除运算(html+php) 思路: 1首先要创建输入数字和运算符的输入框,数字用input的text属性,运算符用sel ...

  6. W3School-CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 C ...

  7. 关于linux,我们应该学什么?

    为了系统地学习一下linux相关知识,我花了三天的时间看完了那本经典的<鸟哥的linux私房菜>.所谓的经典必然是有其过人之处,而看完这本书之后,我毫无疑问地加入了强烈推荐这本书的行列. ...

  8. Python列表list的用法

    #!usr/bin/env python# -*-coding:utf-8-*-#以下方法全在python2.7.x版本运行,请3.x以上的小伙伴们在print(放入括号内执行)#list列表的常用方 ...

  9. Centos7中所有的关机命令的奇怪现象

    今天在研究shutdown,reboot,halt,poweroff几种关机命令的区别是发现他们都是/bin/systemctl的软连接 ls -l /sbin/{shutdown,reboot,ha ...

  10. EF6 的性能优化

    引言 EntityFramework 6 作为微软的开源ORM框架,有着得天独厚的优势.微软也在MVC中主推EF做为ORM框架.但是在实际的项目开发中我们总是感觉到EF有些慢,或者有这样那样的问题.但 ...