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

Like this? Share it with your network

Share

LiveStyle for Vim - Quick start

  • 4,316 views
Uploaded on

LiveStyle for Vim の使い方。 ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,316
On Slideshare
4,267
From Embeds
49
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
11

Embeds 49

https://twitter.com 48
http://tweetedtimes.com 1

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