Sublime3和Chrome配置自動刷新網頁【實測可用】


SublimeText2下的LiveReload在SublimeText3下無法正常使用,本文整理SublimeText3安裝LiveReload的方法。win7下實測可用!

安裝成功后,就不需要再手動去F5刷新頁面了,修改完代碼Ctrl+S,瀏覽器自動刷新,如果是雙屏,效率提升還是比較明顯的。

 

工具

  • Chrome
  • Sublime Text 3
  • Git

 

Chrome安裝LiveReload

在Chrome插件中心搜索"reload"並安裝,(https://chrome.google.com/webstore/search/reload?hl=zh-CN),

成功后可以看到地址欄右邊多了一個LiveReload圖標(裝google插件,記得翻個牆)

 

Sublime3 安裝LiveReload

Sublime3中,直接PackageControl里下載來的LiveReload沒有效果,可以手動從git上下載。

1、打開“Sublime Text 3”點擊菜單欄Preferences->Browse Packages...打開插件安裝目錄;

2、在插件安裝目錄下右擊鼠標選擇“Git Bash Here...”,打開git bash;

3、安裝LiveReload插件,在命令行下輸入

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

4、使用:Ctrl+Shift+P 打開ControlPackage

5、選LiveReload: Enable/disable plug-ins

6、選Enable - SimpleReload

如果不行,就在sublime text3 配置LiveReload。preferences -> Packge Settings -> LiveReload -> Settings - Default

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

 

 

實時預覽

1、在web服務器下編輯index.html文件輸入如圖內容,在瀏覽器中輸入http://localhost訪問文件;

2、然后點擊 Chrome瀏覽器右邊的“LiveReload”圖標中間小圓點由虛變實,表示啟動插件;

3、修改index.html文件內容按 ctr+s 保存,即可在chrome里面看到實時更新。

 

其他

如果之后打開sublime出現錯誤提示框,請看 http://blog.csdn.net/yaerfeng/article/details/9198213

自動刷新網頁的其他方法:

webstorm有liveedit插件可以;(IDE)

brackets也有實時刷新功能;(IDE)

引入live.js可以,但是之后要手動去清除;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM