Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LiveStyle for Vim - Quick start

LiveStyle for Vim - Quick start

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

Tomokazu Kiyohara

August 24, 2013
Tweet

More Decks by Tomokazu Kiyohara

Other Decks in Technology

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