LiveStyle for Vim - Quick start

4,139 views

Published on

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

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,139
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
18
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

LiveStyle for Vim - Quick start

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

×