Your SlideShare is downloading. ×
LiveStyle for Vim
Quick start
2013/08/24 - kanazawa.rb meetup 12
Emmet LiveStyle
http://livestyle.emmet.io/
"Instant updates: see changes as-you-type.
No file saving, no page reloading."
Demo Movie
http://www.youtube.com/watch?v=iQLhGbkupS4
Quick start
http://livestyle.emmet.io/usage/
"1. Install “LiveStyle” plugin from Package Control in
Sublime Text."
LiveStyle for Vim
https://github.com/mattn/livestyle-vim
LiveStyle for Vim
https://github.com/mattn/livestyle-vim
http://mattn.kaoriya.net/
mattn_jp
LiveStyle for Vim
http://mattn.kaoriya.net/
mattn_jp
https://github.com/mattn/livestyle-vim
also Emmet.vim
http://mattn.gi...
Quick start for Vim
Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension
Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension
livestyle-vim
Vundle.vim
Bundle 'mattn/livestyle-vim'
NeoBundle.vim
NeoBundle 'mattn/livestyle-vim'
Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension
livestyled
LiveStyle connection handling server
Compile required
${bundle_dir}/livestyle-vim/livestyled/livestyled.go
livestyled
LiveStyle connection handling server
Compile 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/web...
Compile livestyled
$ cd ${bundle_dir}/livestyle-vim/livestyled
$ go build livestyled.go
Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension
LiveStyle Extension
https://chrome.google.com/webstore/detail/emmet-
livestyle/diebikgmpmeppiilkaijjbdgciafajmg
LiveStyle Extension
https://chrome.google.com/webstore/
Search 'Emmet LiveStyle'
How to Use
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Access site w/ Chrome
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Open Developer tool(LiveStyle Panel)
Open Developer tool(LiveStyle Panel)
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Launch Vim & livestyled
Launch Vim & livestyled
Launch Vim & livestyled
Launch Vim & livestyled
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Bind css via LiveStyle panel
Bind css via LiveStyle panel
Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit...
Edit Edit Edit
Edit Edit Edit
Caution
Restriction
Happy coding !!
"kanazawa.rb ?"
scss/sass supported
scss/sass supported
scss/sass command required
set ft=scss/sass
Heavy ...
Thank you
Tomokazu Kiyohara
http://github.com/kiyohara
http://facebook.com/tomokazu.kiyohara
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
LiveStyle for Vim - Quick start
Upcoming SlideShare
Loading in...5
×

LiveStyle for Vim - Quick start

3,268

Published on

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,268
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "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

×