今天做一個活動頁面,普通的切圖再添加點js效果之類的頁面。來來回回地切窗口,然后將編輯器與瀏覽器,左一半,右一半放在windows窗口上。但調整樣式的時候發現還是得不停地點一下瀏覽器F5一下。不甚其煩!!
我知道有許多的工具可以做到瀏覽器的自動刷新,不過都比較懶去得去做配置,另外我個人也非常討厭在項目中添加一些輔助工具而產生多余的文件,比如現在做的一個活動頁:
|-- active
|-- index.html
|-- css/index.css
|-- js/index.js
|-- img/*.png
就這么一個80%都是純靜態的頁面,最多就一個提交之類的交互,而且是通過ajax進行交互的。通過利用一些構建項目的工具如gulp、webpack-dev-server可以達到自動刷新。但是,本身就簡單的目錄加了許多輔助的文件,感覺項目就** “重” **了起來了。
百度了一下,找了一些合適的工具,可以讓你的目錄干凈無污染。
F5免刷新工具
使用F5工具,不需要什么復雜的步驟,直接到官網上找到軟件,下載安裝之后,將你的項目目錄拖進去,然后在目錄中點開你的index.html文件則可以實現自動刷新。
此F5工具有時可能不太靈,工作久時有可能不會自動刷新,你得關掉頁面,再工具里面去點開index.html文件。
工具的下載與安裝方法:F5
使用sublime的LiveReload插件
如果你使用sublime工具,可以使用LiveReload插件實現瀏覽器自動刷新。
** step1. **
如果你使用chrome瀏覽器,你可能得使用vpn安裝瀏覽器插件擴展LiveReload,如果是火狐瀏覽器,在右上角的打開菜單項-開發者-獲取更多工具中,搜索LiveReload,點添加到Firefox就OK。
安裝完成之后,在瀏覽器的工具欄中會顯示一個livereload的圖標,表示已經安裝完成。
** step2. **
安裝sublime插件LiveReload: ctrl + shift + p
,輸入install package
,再輸入LiveReload
,安裝完成。
有時,安裝不成功,可以直接下載包再手動安裝,先去github上下載源代碼ST3-LiveReload,解壓包文件到
\Sublime Text 3\Data\Packages
對應的目錄中即可。
** step3. **
重啟瀏覽器與sublime text,Preference > Package Settings > LiveReload > Settings User
添加配置:
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
直接在瀏覽器中打開index.html文件,在sulblime中選中Preference > Package Settings > LiveReload > plugins > Enable/disable plugins
。
或者也可以這樣:ctrl + shift + p
,輸入LiveReload: Enable/disable plugins
在瀏覽器中,點擊那個圓形圖標,空心圓變成實心圓啦!大功靠成,解放雙手,可以開心地coding啦!