前端开发福利--sublime3+chrome使用livereload插件实现HTML页面实时预览

切换到浏览器F5刷新,看自己刚写的代码有没有效果,没有效果就再切换到编辑器下修改,然后再切换到浏览器F5刷新看效果,还没有效果,就再......(F5键都被按的塌下去了有木有!)

那么今天就让我们看看如何使用sublime3和chrome配合,使用livereload插件实现HTML实时预览。


主要步骤:

1.在sublime里面安装livereload插件。
2.在chrome里面安装livereload插件。

先说下sublime3里面安装livereload过程:

1a.在sublime里面 ctrl+shift+p

2.输入install package,如下图

前端开发福利--sublime3+chrome使用livereload插件实现HTML页面实时预览_第1张图片
Paste_Image.png

3.搜索livereload,然后点击安装,如下图
前端开发福利--sublime3+chrome使用livereload插件实现HTML页面实时预览_第2张图片
Paste_Image.png

安装成功后会打开一个窗口如下图:
前端开发福利--sublime3+chrome使用livereload插件实现HTML页面实时预览_第3张图片
Paste_Image.png

4.配置(2种方法)
法一:
按着这个路径将下面的代码放进去
Preference>Package Settings>LiveReload>Settings User

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

法二:
按着下面步骤操作也可以的
a. ctrl+shift_p
b. LiveReload: Enable/disable plugins
c.Enable - SimpleReload


至此sublime里面我们配置好了,下面我吗需要在chrome安装livereload插件

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

1.打开chrome浏览器,点击右上角-->设置-->扩展程序,把下载好的livereload插件拖到里面

前端开发福利--sublime3+chrome使用livereload插件实现HTML页面实时预览_第4张图片
Paste_Image.png
现在我们就完成了所有安装,下面看下如何使用(很简单的)

使用方法:

安装完成后,浏览器右上角会多个小图标,如下图

Paste_Image.png

1.把你的html用chrome打开

2.点击右上角的livereload图标,当图标中间的空心小圆,变成实心后,说明livereload正常工作

3.在sublime里面随意修改html,css,js代码,切换浏览后不用刷新就能看到效果了

你可能感兴趣的