LiveStyle for Vim の使い方。 kanazawa.rb meetup 12 発表資料。
LiveStyle for VimQuick start2013/08/24 - kanazawa.rb meetup 12
View Slide
Emmet LiveStylehttp://livestyle.emmet.io/"Instant updates: see changes as-you-type.No file saving, no page reloading."
Demo Moviehttp://www.youtube.com/watch?v=iQLhGbkupS4
Quick starthttp://livestyle.emmet.io/usage/"1. Install “LiveStyle” plugin from Package Control inSublime Text."
LiveStyle for Vimhttps://github.com/mattn/livestyle-vim
LiveStyle for Vimhttps://github.com/mattn/livestyle-vimhttp://mattn.kaoriya.net/mattn_jp
LiveStyle for Vimhttp://mattn.kaoriya.net/mattn_jphttps://github.com/mattn/livestyle-vimalso Emmet.vimhttp://mattn.github.io/emmet-vim/
Quick start for Vim
Quick start for VimVimlivestyle-vimlivestyled (included in livestyle-vim)Google ChromeLiveStyle Extension
livestyle-vimVundle.vimBundle 'mattn/livestyle-vim'NeoBundle.vimNeoBundle 'mattn/livestyle-vim'
livestyledLiveStyle connection handling serverCompile required${bundle_dir}/livestyle-vim/livestyled/livestyled.go
Setup Go lang (osx)$ brew install go
Setup depend libs (osx)$ brew install mercurial$ mkdir ~/.go$ export GOPATH=~/.go$ go get code.google.com/p/go.net/websocket
Compile livestyled$ cd ${bundle_dir}/livestyle-vim/livestyled$ go build livestyle.go
LiveStyle Extensionhttps://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg
LiveStyle Extensionhttps://chrome.google.com/webstore/Search 'Emmet LiveStyle'
How to Use
FlowAccess site w/ ChromeOpen Developer tool (LiveStyle panel)Launch Vim & livestyledBind css via LiveStyle panelEdit Edit Edit
Access site w/ Chrome
Open Developer tool(LiveStyle Panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit
Caution
Restriction
Happy coding !!
"kanazawa.rb ?"
scss/sass supported
scss/sass supportedscss/sass command requiredset ft=scss/sassHeavy ...
Thank youTomokazu Kiyoharahttp://github.com/kiyoharahttp://facebook.com/tomokazu.kiyohara