LiveStyle for Vim - Quick start

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

Transcript

1. LiveStyle for Vim
   Quick start
   2013/08/24 - kanazawa.rb meetup 12
   

   View Slide

2. Emmet LiveStyle
   http://livestyle.emmet.io/
   "Instant updates: see changes as-you-type.
   No file saving, no page reloading."
   

   View Slide

3. Demo Movie
   http://www.youtube.com/watch?v=iQLhGbkupS4
   

   View Slide

4. Quick start
   http://livestyle.emmet.io/usage/
   "1. Install “LiveStyle” plugin from Package Control in
   Sublime Text."
   

   View Slide

5. Quick start
   http://livestyle.emmet.io/usage/
   "1. Install “LiveStyle” plugin from Package Control in
   Sublime Text."
   

   View Slide

6. View Slide

7. View Slide

8. LiveStyle for Vim
   https://github.com/mattn/livestyle-vim
   

   View Slide

9. LiveStyle for Vim
   https://github.com/mattn/livestyle-vim
   http://mattn.kaoriya.net/
   mattn_jp
   

   View Slide

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/
    

    View Slide

11. Quick start for Vim
    

    View Slide

12. Quick start for Vim
    Vim
    livestyle-vim
    livestyled (included in livestyle-vim)
    Google Chrome
    LiveStyle Extension
    

    View Slide

13. Quick start for Vim
    Vim
    livestyle-vim
    livestyled (included in livestyle-vim)
    Google Chrome
    LiveStyle Extension
    

    View Slide

14. livestyle-vim
    Vundle.vim
    Bundle 'mattn/livestyle-vim'
    NeoBundle.vim
    NeoBundle 'mattn/livestyle-vim'
    

    View Slide

15. Quick start for Vim
    Vim
    livestyle-vim
    livestyled (included in livestyle-vim)
    Google Chrome
    LiveStyle Extension
    

    View Slide

16. livestyled
    LiveStyle connection handling server
    Compile required
    ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
    

    View Slide

17. livestyled
    LiveStyle connection handling server
    Compile required
    ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
    

    View Slide

18. Setup Go lang (osx)
    $ brew install go
    

    View Slide

19. Setup depend libs (osx)
    $ brew install mercurial
    $ mkdir ~/.go
    $ export GOPATH=~/.go
    $ go get code.google.com/p/go.net/websocket
    

    View Slide

20. Compile livestyled
    $ cd ${bundle_dir}/livestyle-vim/livestyled
    $ go build livestyle.go
    

    View Slide

21. Quick start for Vim
    Vim
    livestyle-vim
    livestyled (included in livestyle-vim)
    Google Chrome
    LiveStyle Extension
    

    View Slide

22. LiveStyle Extension
    https://chrome.google.com/webstore/detail/emmet-
    livestyle/diebikgmpmeppiilkaijjbdgciafajmg
    

    View Slide

23. LiveStyle Extension
    https://chrome.google.com/webstore/
    Search 'Emmet LiveStyle'
    

    View Slide

24. How to Use
    

    View Slide

25. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

26. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

27. Access site w/ Chrome
    

    View Slide

28. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

29. Open Developer tool(LiveStyle Panel)
    

    View Slide

30. Open Developer tool(LiveStyle Panel)
    

    View Slide

31. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

32. Launch Vim & livestyled
    

    View Slide

33. Launch Vim & livestyled
    

    View Slide

34. Launch Vim & livestyled
    

    View Slide

35. Launch Vim & livestyled
    

    View Slide

36. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

37. Bind css via LiveStyle panel
    

    View Slide

38. Bind css via LiveStyle panel
    

    View Slide

39. Flow
    Access site w/ Chrome
    Open Developer tool (LiveStyle panel)
    Launch Vim & livestyled
    Bind css via LiveStyle panel
    Edit Edit Edit
    

    View Slide

40. Edit Edit Edit
    

    View Slide

41. Edit Edit Edit
    

    View Slide

42. Caution
    

    View Slide

43. Restriction
    

    View Slide

44. Happy coding !!
    

    View Slide

45. "kanazawa.rb ?"
    

    View Slide

46. scss/sass supported
    

    View Slide

47. scss/sass supported
    scss/sass command required
    set ft=scss/sass
    Heavy ...
    

    View Slide

48. Thank you
    Tomokazu Kiyohara
    http://github.com/kiyohara
    http://facebook.com/tomokazu.kiyohara
    

    View Slide