BROWSER-SYNC
Menggunakan Browser-Sync yang luar biasa
- perbarui browser (apa saja) ketika kode sumber berubah (HTML, CSS, gambar, dll.)
- mendukung Windows, MacOS dan Linux
- Anda bahkan dapat menonton pembaruan kode Anda (langsung) menggunakan perangkat seluler Anda
Instalasi pada MacOS (lihat bantuan mereka untuk menginstal pada OS lain)
Instal NVM, sehingga Anda dapat mencoba versi Node apa pun
brew install nvm # install a Node version manager
nvm ls-remote # list available Node versions
nvm install v10.13.0 # install one of them
npm install -g browser-sync # install Browser-Sync
Cara menggunakan sinkronisasi browser untuk situs statis
Mari kita lihat dua contoh:
browser-sync start --server --files . --host YOUR_IP_HERE --port 9000
browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000
The --server
pilihan memungkinkan Anda untuk menjalankan mana saja server lokal Anda berada di terminal Anda dan --files
membiarkan Anda menentukan file mana yang akan dilacak untuk perubahan. Saya lebih suka lebih spesifik untuk file yang dilacak, jadi pada contoh kedua saya gunakan ack
untuk mendaftar ekstensi file spesifik (penting agar file-file tersebut tidak memiliki nama file dengan spasi) dan juga digunakan ipconfig
untuk menemukan IP saya saat ini di MacOS.
Cara menggunakan sinkronisasi browser untuk situs dinamis
Jika Anda menggunakan PHP, Rails, dll., Anda sudah memiliki server yang berjalan, tetapi itu tidak menyegarkan secara otomatis ketika Anda membuat perubahan pada kode Anda. Jadi, Anda perlu menggunakan --proxy
sakelar untuk membiarkan sinkronisasi browser mengetahui di mana host untuk server itu.
browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open
Pada contoh di atas, saya sudah mengaktifkan aplikasi Rails di browser saya 192.168.33.12:3000
. Ini benar-benar berjalan pada VM menggunakan kotak Vagrant, tapi saya bisa mengakses mesin virtual menggunakan port 3000 pada host itu. Saya suka --no-notify
menghentikan sinkronisasi browser mengirimi saya pemberitahuan notifikasi pada browser setiap kali saya mengubah kode saya dan --no-open
untuk menghentikan perilaku sinkronisasi browser yang segera memuat tab browser ketika server mulai.
PENTING: Jika Anda menggunakan Rails, hindari menggunakan Turbolinks saat pengembangan, jika tidak, Anda tidak akan dapat mengklik tautan Anda saat menggunakan --proxy
opsi.
Semoga bermanfaat bagi seseorang. Saya sudah mencoba banyak trik untuk menyegarkan browser (bahkan posting lama yang saya kirimkan pada pertanyaan StackOverflow ini menggunakan AlfredApp waktu lalu), tetapi ini benar-benar cara untuk pergi; tidak ada lagi peretasan, itu hanya mengalir.
KREDIT: Mulai server web live reload lokal dengan satu perintah