Cara Instal BrowserSync Pada Windows

BrowserSync merupakan sebuah proyek open-source bersama dengan para kontributor yang dibuat dan di maintenance oleh desainer/developer front-end dengan tujuan untuk membuat sebuah multi-device web development modern yang lebih cepat & mudah.

Browsersync dapat mensingkronisasikan secara realtime pada perubahan kode ketika sesudah diketik disebuah text editor, maka Browsersync akan menampilkannya langsung di browser tanpa Refresh sebuah halaman atau browser.

Panduan step by step install BrowserSync :

Install Node.js

Browsersync membutuhkan Node.js, sebuah platform untuk aplikasi jaringan yang cepat, sehingga kita memerlukan Node.js untuk menginstall Browsersync. Download Node.js Disini 

Install Browsersync

Setelah Node.js terinstall, selanjutnya menginstall Browsersync secara online (pastikan sudah konek internet) dengan perintah pada command prompt atau terminal :

Buka cmd
Ketik perintah berikut :

node --version (untuk cek Node.js sudah terinstal apa belum)

npm install -g browser-sync (untuk menginstal Browsersync nya)

npm --version (untuk cek npm Browsersync sudah terinstal apa belum)

Disini sanya menyimpannya pada direktori C:\xampp\htdocs\belajarweb dan pastikan xamppnya sudah terinstall :

Jika sudah terinstal Node.js dan Browsersync nya selanjutnya ketik perintah berikut pada cmd untuk memanggil folder direktori tempat menyimpan project web kita,

cd \xampp\htdocs\belajarweb

Kita tidak perlu menuliskan nama file css secara spesifik, kita hanya perlu memanggilnya dengan tanda bintang (*) dan diakhiri dengan nama eksistensinya yaitu css. Dengan menuliskan perintah ini maka setiap kali ada perubahan dalam css, maka akan terpanggil atau reload secara otomatis sehingga akan langsung tampil di browser. Lalu bagaimana jika file html yang ingin kita singkron-kan ? tambahkan dengan tanda koma, diikuti dengan letak direktori file html itu berada. Umumnya file html berada dalam satu direktori sehingga penulisannya cukup dengan menyebut file eksistensinya saja (*.html),

ketik perintah berikut :

browser-sync start --server --files "css/*.css, *.html"

Jalankan tekan (enter)

Tunggu proses sampai Browsersync membuka sebuah browser yang kita pilih atau browser default. URL-nya akan menjadi "localhost:3000".

Setelah itu kita dapat melakukan perubahan apapun, baik di file css, maupun html dan akan langsung terlihat perubahannya tanpa kita refresh manual.

Berikut ini control panel pada  Browsersync, cara aksesnya ketik "localhost:3001"

Sekarang anda dapat melihat pada browser tanpa refresh halaman ketika ada perubahan yang sudah disave pada text editor.

Sekian artikel Cara Instal BrowserSync Pada Windows, semoga bermaanfaat. Amin :-)