前端在使用sublime写hmtl页面时,总要切换编辑器与浏览器,反复的修改与刷新浏览器,很麻烦.本文介绍如何通过谷歌浏览器的livereload插件和sublime的livereload插件配合,实现html文件内容修改的自动刷新.

 

1 所需插件:谷歌浏览器的livereload插件;sublime的livereload插件.

 

2 sublime插件安装方法及配置.

 

2.1 sublime的package control的安装方法就不说了,百度一下有很多文章.在sublime的界面,同时按下ctrl+shift+p,弹出界面输入install package,点击红色的项目.

 

2.2 在弹出的界面输入livereload;点击livereload项目.

 

2.3 点击后sublime开始自动安装,安装完成后进行配置;依次点击 首选项-Package Setting-LiveReload-Setting User;将下面的jon代码粘贴进去,保存.即完成sublime上的配置.

 

{

 

    "enabled_plugins": [

 

        "SimpleReloadPlugin",

 

        "SimpleRefresh"

 

    ]

 

}

 

3 谷歌浏览器插件安装.

 

3.1 如果你能'科学上网'的话,直接在谷歌网上应用商店搜索livereload即可,搜索结果的第一个就是我们想要的.点击添加至CHROME,按步骤操作即可完成安装

 

3.2 果你是个良民,网上直接下载插件,手动导入也可以.

 

3.2.1 插件网livereload下载地址: http://www.cnplugins.com/devtool/livereload/

 

百度网盘分享链接 https://pan.baidu.com/s/1eSfa28y 密码 ckg6

 

下载下来的是一个.crx文件.打开谷歌浏览器,依次点击:自定义及控制(右上角的竖着的三个点)-更多工具-扩展程序;打开扩展程序列表.

 

3.2.2 将下载成功的.crx文件直接拖拽到扩展程序列表,即可完成插件安装.

 

3.2.3 谷歌浏览器安装成功后,会在浏览器右上角出现类似刷新的图标,中间有一个空心圆.就是livereload的图标.

 

4 插件都准备好后,打开正在编辑的html页面.这一步很重要,打开方式一定是在本地起的一个服务下打开,不管使用http-server本地起服务的方式,还是sublime的插件SublimeServer直接打开的方式,只要地址栏是localhost(127.0.0.1)开始即可.不能直接点击文件打开.

 

sublime插件SublimeServer打开方式

 

5 页面在浏览器打开后,点击liveReload的图标,图标的空心圆变为实心圆,表明与sublime连接成功.

 

6 至此,既完成了浏览器与sublime文件的连接,修改hmtl页面,保存后,浏览器会自动更新.

 

备注:

 

打开文件的方式一定要在本地服务环境下打开;可安装sublime的插件sublimeServer;也可以使用http-server,使用http-server参考文章:最简单的开启http-server方式!

 

更新只针对html页面的改变,不包括外部引入的js或css文件内容的改变.