livereload插件实现HTML页面实时预览

原文链接：http://www.jianshu.com/p/0edcc784f2be

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

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

主要步骤：

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

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

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

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

2.输入install package,如下图

Paste_Image.png

3.搜索livereload,然后点击安装，如下图

Paste_Image.png

安装成功后会打开一个窗口如下图：

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插件拖到里面

Paste_Image.png

现在我们就完成了所有安装，下面看下如何使用（很简单的）

使用方法：

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

Paste_Image.png

1.把你的html用chrome打开

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

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

作者：rain129

链接：http://www.jianshu.com/p/0edcc784f2be

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。