chaihongjun.me

LiveReload一款解放F5的开发工具

LiveReload一款解放F5的开发工具

  • 编辑修改文件

  • 保存文件(Ctrl+S)

  • 鼠标移到浏览器

  • 鼠标点击浏览器

  • F5或者右键刷新

  • 实际情况其实浪费时间更多:

    1. 编辑修改文件

    2. 保存文件(Ctrl+S)

    3. 鼠标移到浏览器

    4. 鼠标点击浏览器

    5. F5或者右键刷新

    6. 鼠标移到编辑器

    7. 鼠标点击浏览器

    是的,实际情况是1至7步骤的周而复始的循环,直到文件修改满意。liveReload的出现至少解决了其中的鼠标移到和鼠标点击环节这些不属于编辑文件但是发生频率较高的多余动作。只需要关注当前编辑的文件即可:

    1. 编辑文件

    2. 保存文件,并查看变化,如果不满意返回1,如果满意至此结束。

    提示:liveReload是一套工具,连接编辑器与浏览器。所以涉及的安装有chrome和sublimetext3

    LiveReload一款解放F5的开发工具

    安装步骤:

    1. 在chrome商店搜索"liveReload"并安装

    2. 第二步就是编辑器sublimetext3的插件livereload安装了:

    这里要提一下的就是liveReload官方github提供的git似乎有点问题,需要从另外一个git地址下载:

    https://github.com/Grafikart/ST3-LiveReload.git

    具体执行以下:

    Ctrl+Shift+P
    Add Repository

    然后将上面的git地址贴到sublimetext3,并且回车确认

    接着

    Ctrl+Shift+P
    IP
    LiveReload   ###官方版
    Ctrl+Shift+P
    IP
    ST3-LiveReload   ###st3修复版

    这里会遇到点小问题liveReload是官方的插件,但是貌似对ST3支持不好,所以后面再又安装了ST3修复版。

    接着是配置插件:

    Preference>Package Settings>LiveReload>Settings User

    贴进去:

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

    或者还有就是

    Preference>Package Settings>LiveReload>Plugins>Enables/disable plugins

    或者

    ctrl+shift+p 
    LiveReload: Enable/disable plugins 
    Enable - SimpleReload

    最后全部完成。在ST3里面测试一下是否是当前编辑的文档只要一修改,浏览器显示就会对应的变化。最后再提示一下,如果是在本地编辑文件,请进入chrome的插件配置把“允许访问文件网址”勾选上,这样就支持了通过 file:// 打开的页面


    知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»