sublime3--auto-save + LiveReload 实现前端自动刷新

前言：

    近期学习前端，由于网页制作要实时预览 当时年少无知和满腔热血 ，不断的循环着 coding + Ctrl-S  + F5 的体力活动；终于觉悟想偷懒 ，于是找到了LiveReload + sublime3 组合，试了很多帖子的方法。

出现的问题的猜想：

    当sublime使用插件liveReload时，浏览器的liveReload插件会联通

    （1）sublime3 的和 chrome内核浏览器（我的是百度浏览器）链接上了，但是没有自动刷新网页：

            估计是chrome内核不支持file：// 

    （2） （由http://www.cnblogs.com/vingi/articles/4109498.html）

        输入http://localhost:35729/livereload.js?snipver=1可以验证，sublime的liveReload插件开启了一个服务器

            而浏览器的插件就是和这个服务器websocket实时通信的；实现不了自动刷新是因为如下：

“Chrome extension on the Chrome Web Store — if you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation.”

        需要找到这个localhost的目录，把要编辑的网页文件放进去才能检查到改动，进而自动刷新；

    （3）sublime插件工作机制：

            启动时会加载插件的设置脚本，因为liveReload不会自动启用，可以通过preference -- package-settings --

        LiveReload -- settings-user 的脚本让之自动开启相关功能：

            

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

       

现在解决的问题：

    借助帖子：《前端自动化神器LiveReload配合浏览器和less/sass使用方法》，成功配置了 LiveReload + sublime3 实现自动网页预览，后来懒到连ctrl-s 保存代码都用插件“auto-save”省了。

最终的结果：    能在Firefox 中使用敲完代码自动刷新网页预览

    

--------------------------------------不定期更新方法------------------------------------------------

步骤：在Firefox实现 sublime3 +LiveReload （windows版，不是sublime3的插件）

    （1）按帖子《前端自动化神器LiveReload配合浏览器和less/sass使用方法》装好LiveReload的本地软件和Firefox的

LiveReload插件；

    注意：LiveReload插件签名未验证不能安装，要关掉Firefox的签名检测才能安装：

         在火狐输入about:config得到的页面中把图示值改为false

        

            

    （2）给sublime3 安装自动保存插件“auto-save”

        1.ctrl+shift+p 调出任务台执行 “install package”找到 “auto-save”插件安上；

        2.配置auto-save插件，使得按下ctrl+shift+s 自动开启自动保存，这是liverreload才会自动刷新编辑的网页：

            （参考插件官网：https://packagecontrol.io/packages/auto-save）

            sublime菜单 "Preferences --》 Key Bindings - User", 粘贴如下字符:

                  { "keys": ["ctrl+shift+s"], "command": "auto_save" }

  

转载于:https://my.oschina.net/Bidongming/blog/619979