├── doc └── vim-live-server.txt ├── plugin └── vim-live-server.vim └── README.md /doc/vim-live-server.txt: -------------------------------------------------------------------------------- 1 | *vim-live-server.txt* For Vim version 8.0+ Last change: 2024-06-25 2 | ============================================================================== 3 | 1. Introduction *vim-live-server* 4 | ============================================================================== 5 | VIM-LIVE-SERVER 6 | 7 | A live web server for Vim 8 | By Wolandark 9 | https://github.com/wolandark/vim-live-server 10 | ============================================================================== 11 | CONTENTS *vim-live-server-contents* 12 | 13 | 1. BrowserSync Functions |vim-live-server-browsersync| 14 | 2. LiveServer Functions |vim-live-server-liveserver| 15 | 3. Commands |vim-live-server-commands| 16 | 4. Examples |vim-liveserver-examples| 17 | 18 | ============================================================================== 19 | BROWSERSYNC FUNCTIONS *vim-live-server-browsersync* 20 | 21 | StartBrowserSync()~ 22 | Starts a BrowserSync server that watches all .html, .css, and .js files in 23 | the current working directory. 24 | 25 | StartBrowserSyncOnPort(port)~ 26 | Starts a BrowserSync server on a specified port. 27 | 28 | KillBrowserSync()~ 29 | Terminates the BrowserSync server running on default port 3000. 30 | 31 | KillBrowserSyncOnPort(port)~ 32 | Terminates the BrowserSync server running on a specified port. 33 | 34 | KillAllBrowserSyncInstances()~ 35 | Terminates all running instances of BrowserSync. 36 | 37 | ============================================================================== 38 | LIVESERVER FUNCTIONS *vim-live-server-liveserver* 39 | 40 | StartLiveServer()~ 41 | Starts a LiveServer instance. 42 | 43 | StartLiveServerOnPort(port)~ 44 | Starts a LiveServer instance on a specified port. 45 | 46 | KillLiveServer()~ 47 | Terminates the LiveServer instance running on default port 8080. 48 | 49 | KillLiveServerOnPort(port)~ 50 | Terminates the LiveServer instance running on a specified port. 51 | 52 | KillAllLiveServerInstances()~ 53 | Terminates all running instances of LiveServer. 54 | 55 | ============================================================================== 56 | COMMANDS *vim-live-server-commands* 57 | 58 | :StartBrowserSync~ 59 | Calls StartBrowserSync(). 60 | 61 | :StartLiveServer~ 62 | Calls StartLiveServer(). 63 | 64 | :StartBrowserSyncOnPort {port}~ 65 | Calls StartBrowserSyncOnPort({port}). 66 | 67 | :StartLiveServerOnPort {port}~ 68 | Calls StartLiveServerOnPort({port}). 69 | 70 | :KillBrowserSync~ 71 | Calls KillBrowserSync(). 72 | 73 | :KillLiveServer~ 74 | Calls KillLiveServer(). 75 | 76 | :KillBrowserSyncOnPort {port}~ 77 | Calls KillBrowserSyncOnPort({port}). 78 | 79 | :KillLiveServerOnPort {port}~ 80 | Calls KillLiveServerOnPort({port}). 81 | 82 | Please replace {port} with the desired port number when using the commands 83 | that require a port argument. 84 | 85 | ============================================================================== 86 | EXAMPLES *vim-liveserver-examples* 87 | 88 | :StartLiveServerOnPort 2222~ 89 | :KillLiveServerOnPort 2222~ 90 | 91 | ============================================================================== 92 | vim:tw=78:ts=8:noet:ft=help:norl: 93 | 94 | -------------------------------------------------------------------------------- /plugin/vim-live-server.vim: -------------------------------------------------------------------------------- 1 | " vim-live-server.vim 2 | 3 | " A live web server for Vim 4 | " By Wolandark 5 | " https://github.com/wolandark/vim-live-server 6 | 7 | "Browser-Sync 8 | function! StartBrowserSync() 9 | " let cmd = "browser-sync start --no-notify --server --cwd=" . getcwd() . " --files \"*.html, *.css, *.js\" &" 10 | let cmd = "browser-sync start --no-notify --server --files *.html, *.css, *.js &" 11 | call system(cmd) 12 | echo "BrowserSync started in the background." 13 | endfunction 14 | 15 | function! StartBrowserSyncOnPort(port) 16 | let port_num = a:port + 0 " Convert a:port to a number 17 | let cmd = "browser-sync start --no-notify --server --cwd=" . getcwd() . " --port=" . port_num . " --files \"*.html, *.css, *.js\" &" 18 | call system(cmd) 19 | echo "BrowserSync started in the background on port " . port_num . "." 20 | endfunction 21 | 22 | function! KillBrowserSync() 23 | let port = systemlist("pgrep -f 'browser-sync'")[0] 24 | if empty(port) 25 | echo "No BrowserSync server found on port 3000." 26 | else 27 | let cmd = "kill " . port 28 | call system(cmd) 29 | echo "BrowserSync server on port 3000 terminated." 30 | endif 31 | endfunction 32 | 33 | function! KillBrowserSyncOnPort(port) 34 | let cmd = "pgrep -f 'browser-sync.*--port=" . a:port . "' | xargs -r kill" 35 | call system(cmd) 36 | echo "BrowserSync server on port " . a:port . " terminated." 37 | endfunction 38 | 39 | function! KillAllBrowserSyncInstances() 40 | let cmd = "pkill -f 'browser-sync'" 41 | call system(cmd) 42 | endfunction 43 | 44 | augroup BrowserSyncKill 45 | autocmd! 46 | autocmd VimLeave * call KillAllBrowserSyncInstances() 47 | augroup END 48 | 49 | " Live-Server 50 | function! StartLiveServer() 51 | let cmd = "live-server &" 52 | call system(cmd) 53 | echo "Live server started in the background." 54 | endfunction 55 | 56 | function! StartLiveServerOnPort(port) 57 | let port_num = a:port + 0 " Convert a:port to a number 58 | let cmd = "live-server --port=" . port_num . "&" 59 | call system(cmd) 60 | echo "Live Server started in the background on port " . port_num . "." 61 | endfunction 62 | 63 | function! KillLiveServer() 64 | let port = systemlist("pgrep -f 'live-server'")[0] 65 | if empty(port) 66 | echo "No Live Server found on port 8080." 67 | else 68 | let cmd = "kill " . port 69 | call system(cmd) 70 | echo "Live Server on port 8080 terminated." 71 | endif 72 | endfunction 73 | 74 | function! KillLiveServerOnPort(port) 75 | let cmd = "pgrep -f 'live-server.*--port=" . a:port . "' | xargs -r kill" 76 | call system(cmd) 77 | echo "Live Server on port " . a:port . " terminated." 78 | endfunction 79 | 80 | function! KillAllLiveServerInstances() 81 | let cmd = "pkill -f 'live-server'" 82 | call system(cmd) 83 | endfunction 84 | 85 | augroup LiveServerKill 86 | autocmd! 87 | autocmd VimLeave * call KillAllLiveServerInstances() 88 | augroup END 89 | 90 | " Call Commands 91 | command! StartBrowserSync call StartBrowserSync() 92 | command! StartLiveServer call StartLiveServer() 93 | command! -nargs=1 StartBrowserSyncOnPort call StartBrowserSyncOnPort() 94 | command! -nargs=1 StartLiveServerOnPort call StartLiveServerOnPort() 95 | command! KillBrowserSync call KillBrowserSync() 96 | command! KillLiveServer call KillLiveServer() 97 | command! -nargs=1 KillBrowserSyncOnPort call KillBrowserSyncOnPort() 98 | command! -nargs=1 KillLiveServerOnPort call KillLiveServerOnPort() 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vim Live Server 2 | ## Preview your web development in your browser in real time. 3 | A dead-simple live server for Vim/NeoVim
4 | Supporting [live-server](https://www.npmjs.com/package/live-server) and [browser-sync](https://www.npmjs.com/package/browser-sync). 5 | 6 | # Index 7 | - [Dependency](#dependency) 8 | - [Installation](#installation) 9 | - [Using Vim packages](#using-vim-packages) 10 | - [Using vim-plug](#using-vim-plug) 11 | - [Using Vundle](#using-vundle) 12 | - [Using Pathogen](#using-pathogen) 13 | - [Usage](#usage) 14 | - [Optional keybindings](#optional-keybindings) 15 | - [Demo](#demo) 16 | - [Note on Two Backends](#note-on-two-backends) 17 | - [Contact me](#contact-me) 18 | - [Contribution Guide](#contribution-guide) 19 | 20 | 21 | ## Dependency 22 | - nodejs 23 | - npm 24 | 25 | Install either the `live-server` or the `browser-sync` package globally using npm: 26 | ``` 27 | sudo npm install -g live-server 28 | sudo npm install -g browser-sync 29 | ``` 30 | 31 | # Installation 32 | Use your favorite Vim plugin manager to install [vim-live-server](https://github.com/wolandark/vim-live-server). 33 | 34 | #### Using Vim [packages](https://vimhelp.org/repeat.txt.html#packages) 35 | 36 | (**needs Vim 8+**) 37 | ``` 38 | git clone https://github.com/wolandark/vim-live-server.git ~/.vim/pack/plugins/start/vim-live-server/ 39 | ``` 40 | #### Using [vim-plug](https://github.com/junegunn/vim-plug) 41 | 42 | Add the following line to your plugin configuration in your .vimrc file: 43 | ``` 44 | Plug 'https://github.com/wolandark/vim-live-server.git' 45 | ``` 46 | With vimplug you can use one of these alternative commands that uses a post-installation hook to download the live-server or the browser-sync package from npm automatically: 47 | 48 | ``` 49 | Plug 'https://github.com/wolandark/vim-live-server.git', { 'do': 'sudo npm install -g live-server' } 50 | Plug 'https://github.com/wolandark/vim-live-server.git', { 'do': 'sudo npm install -g browser-sync' } 51 | ``` 52 | 53 | #### Using [Vundle](https://github.com/VundleVim/Vundle.vim) 54 | 55 | ``` 56 | Plugin 'https://github.com/wolandark/vim-live-server.git' 57 | ``` 58 | 59 | #### Using [Pathogen](https://github.com/tpope/vim-pathogen) 60 | 61 | Clone the vim-live-server repository into your Vim bundle directory: 62 | ``` 63 | cd ~/.vim/bundle 64 | git clone https://github.com/wolandark/vim-live-server.git 65 | ``` 66 | 67 | # Usage 68 | Open your index.html file in vim and issue the following in ex-mode. live-server will start and bind itself to `localhost:8080` and `browser-sync` will bind to `localhost:3000`.
69 | _Notice that all of the commands use pascal case_
70 | ``` 71 | StartLiveServer 72 | 73 | or 74 | 75 | StartBrowserSync 76 | ``` 77 | Vim Live Server opens your default browser automatically.
78 | 79 | To start serving on a specific port, use: 80 | ``` 81 | StartLiveServerOnPort N 82 | StartLiveServerOnPort 2222 83 | 84 | StartBrowserSyncOnPort N 85 | StartBrowserSyncOnPort 3001 86 | ``` 87 | 88 | To kill the server on the default port 3000 use this: 89 | ``` 90 | KillLiveServer 91 | 92 | KillBrowserSync 93 | ``` 94 | Use this command to kill the server on a certain port: 95 | ``` 96 | KillLiveServerOnPort N 97 | KillLiveServerOnPort 2222 98 | 99 | KillBrowserSyncOnPort N 100 | KillBrowserSyncOnPort 3001 101 | ``` 102 | _Note: 103 | vim-live-server will kill all running instances of live-server and browser-sync on [VimLeave](https://vimhelp.org/autocmd.txt.html#VimLeave)._ 104 | 105 | # Optional keybindings 106 | ``` 107 | nmap :StartLiveServer 108 | nmap :KillLiveServer 109 | 110 | nmap :StartBrowserSync 111 | nmap :KillBrowserSync 112 | ``` 113 | 114 |

Thats it! Enjoy!

115 | 116 | # Demo 117 | https://github.com/wolandark/browser-sync/assets/107309764/218cb8a0-459a-43cd-a987-1b43d1fb2b92 118 | 119 | # Note on Two Backends 120 | Vim Live Server offers flexibility by supporting two backend options: `live-server` and `browser-sync`. However, users need to install and use only one of them, depending on their preferences and requirements. 121 | 122 | The inclusion of `live-server` is motivated by its straightforward and efficient approach, and a 'no-nonsense' nature. Notably, it avoids resetting the scroll position on reload, providing a seamless experience during development. 123 | 124 | Choose the backend that best aligns with your workflow and and enjoy using you favorite editor for development. 125 | 126 | # Contribution Guide 127 | Please follow contribution conventions when submiting pull requests. See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) for more information. 128 | 129 | # Contact me 130 | Feel free to reach out on Telegram or email for support, feedback, or contributions. 131 | 132 | [![Telegram](https://img.shields.io/badge/Telegram-2CA5E0?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/wolandarkside) 133 | [![Protonmail](https://img.shields.io/badge/ProtonMail-8B89CC?style=for-the-badge&logo=protonmail&logoColor=white)](mailto:contact-woland@proton.me) 134 | --------------------------------------------------------------------------------