Your SlideShare is downloading. ×
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LiveStyle for Vim - Quick start

3,185

Published on

LiveStyle for Vim の使い方。 …

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

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

No Downloads
Views
Total Views
3,185
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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."
  • 6. LiveStyle for Vim https://github.com/mattn/livestyle-vim
  • 7. LiveStyle for Vim https://github.com/mattn/livestyle-vim http://mattn.kaoriya.net/ mattn_jp
  • 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. Quick start for Vim
  • 10. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
  • 11. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
  • 12. livestyle-vim Vundle.vim Bundle 'mattn/livestyle-vim' NeoBundle.vim NeoBundle 'mattn/livestyle-vim'
  • 13. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
  • 14. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
  • 15. livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
  • 16. Setup Go lang (osx) $ brew install go
  • 17. Setup depend libs (osx) $ brew install mercurial $ mkdir ~/.go $ export GOPATH=~/.go $ go get code.google.com/p/go.net/websocket
  • 18. Compile livestyled $ cd ${bundle_dir}/livestyle-vim/livestyled $ go build livestyled.go
  • 19. Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim) Google Chrome LiveStyle Extension
  • 20. LiveStyle Extension https://chrome.google.com/webstore/detail/emmet- livestyle/diebikgmpmeppiilkaijjbdgciafajmg
  • 21. LiveStyle Extension https://chrome.google.com/webstore/ Search 'Emmet LiveStyle'
  • 22. How to Use
  • 23. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 24. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 25. Access site w/ Chrome
  • 26. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 27. Open Developer tool(LiveStyle Panel)
  • 28. Open Developer tool(LiveStyle Panel)
  • 29. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 30. Launch Vim & livestyled
  • 31. Launch Vim & livestyled
  • 32. Launch Vim & livestyled
  • 33. Launch Vim & livestyled
  • 34. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 35. Bind css via LiveStyle panel
  • 36. Bind css via LiveStyle panel
  • 37. Flow Access site w/ Chrome Open Developer tool (LiveStyle panel) Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
  • 38. Edit Edit Edit
  • 39. Edit Edit Edit
  • 40. Caution
  • 41. Restriction
  • 42. Happy coding !!
  • 43. "kanazawa.rb ?"
  • 44. scss/sass supported
  • 45. scss/sass supported scss/sass command required set ft=scss/sass Heavy ...
  • 46. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara

×