LiveStyle for Vim - Quick start

LiveStyle for Vim の使い方。
kanazawa.rb meetup 12 発表資料。

Transcript

1. LiveStyle for Vim Quick start 2013/08/24 - kanazawa.rb meetup 12
2. Emmet LiveStyle http://livestyle.emmet.io/ "Instant updates: see changes as-you-type. No file saving, no page reloading."
3. Demo Movie http://www.youtube.com/watch?v=iQLhGbkupS4
4. Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control in Sublime Text."
5. Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control in Sublime Text."
8. LiveStyle for Vim https://github.com/mattn/livestyle-vim
9. LiveStyle for Vim https://github.com/mattn/livestyle-vim http://mattn.kaoriya.net/ mattn_jp
10. LiveStyle for Vim http://mattn.kaoriya.net/ mattn_jp https://github.com/mattn/livestyle-vim also Emmet.vim http://mattn.github.io/emmet-vim/
11. Quick start for Vim
12. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
13. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
14. livestyle-vim Vundle.vim Bundle 'mattn/livestyle-vim' NeoBundle.vim NeoBundle 'mattn/livestyle-vim'
15. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
16. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
17. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
18. Setup Go lang (osx) $ brew install go
19. Setup depend libs (osx) $ brew install mercurial $ mkdir ~/.go $ export GOPATH=~/.go $ go get code.google.com/p/go.net/websocket
20. Compile livestyled $ cd ${bundle_dir}/livestyle-vim/livestyled $ go build livestyle.go
21. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
22. LiveStyle Extension https://chrome.google.com/webstore/detail/emmet- livestyle/diebikgmpmeppiilkaijjbdgciafajmg
23. LiveStyle Extension https://chrome.google.com/webstore/ Search 'Emmet LiveStyle'
24. How to Use
25. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
26. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
27. Access site w/ Chrome
28. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
29. Open Developer tool(LiveStyle Panel)
30. Open Developer tool(LiveStyle Panel)
31. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
32. Launch Vim & livestyled
33. Launch Vim & livestyled
34. Launch Vim & livestyled
35. Launch Vim & livestyled
36. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
37. Bind css via LiveStyle panel
38. Bind css via LiveStyle panel
39. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
40. Edit Edit Edit
41. Edit Edit Edit
42. Caution
43. Restriction
44. Happy coding !!
45. "kanazawa.rb ?"
46. scss/sass supported
47. scss/sass supported scss/sass command required set ft=scss/sass Heavy ...
48. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara