LiveStyle for Vim - Quick start

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. None
7. None

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