livereload for Windows因為是測試版,經常性的有問題,有時候還會不能使用,這時候可以試試Emmet LiveStyle,他主要會針對CSS的部分直接reload。來看看官方的影片吧。
安裝
http://livestyle.emmet.io/install/
安裝流程都是參考官方文件。而這是Sublime Text的擴充功能,所以一定要用Sublime Text,流程如下:
- 安裝Package Control
- 安裝LiveStyle 擴充功能
- 安裝Chrome的 LiveStyle 擴充功能
- 使用LiveStyle
安裝Package Control
這部分只要開啟Sublime Text,按下ctrl+`
並且貼上以下的code即可。
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
原諒我這段,這邊我懶得重裝了…,所以沒有圖。
安裝LiveStyle 擴充功能
在Sublime Text上方的Preferences下找到Package Control。
選擇:Install Package
接下來輸入LiveStyle,就能安裝LiveStyle擴充功能
安裝Chrome的 LiveStyle 擴充功能
打開這個網址
Chrome Emmet LiveStyle,再加入倒Chomre就可以了。
使用 LiveStyle
Chrome的擴充元件,放在開發者工具裡,只要按下F12,就能看到開發者工具,找到LiveStyle並Enable LiveStyle for current page
。
接下來開啟正在做的檔案(直接開就可以了)
修改CSS,不需要存檔,就會發現畫面上的CSS效果跟著改變囉。