Auto Reload Dengan BrowserSync

Sesuai judul tulisan ini bertujuan agar saat mendesain sebuah website tampilan akan otomatis berubah di peramban ( browser ) tanpa di muat ulang manual. Fitur ini biasanya sudah terpasang jika kita menggunakan framework atau library javascript modern seperti React dan Vue misalnya.

Persiapan

Pastikan nodejs sudah terpasang, saya menggunakan node versi 8.11.

Inisialisasi

root direktori saya ada di /var/www/html/auto, saat saya berbicara root folder maka mengacu ke lokasi tersebut.

Di dalam root folder lakukan inisialiasi dengan perintah berikut:

$ npm init

Ikuti saja perintah yang muncu di layar terminal.

Selanjutnya setelah inisialisasi selesai kita pasang paket browser-sync

npm i browser-sync

Konfigurasi

Ubah berkas package.json menjadi seperti berikut:

{
  "name": "auto",
  "version": "1.0.0",
  "description": "auto reload",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_module/**/**' --directory --port 8888"
  },
  "author": "arsmp",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.3"
  }
}

Yang perlu diperhatikan pada bagian script: { “start”: ”…”} di sana saya menjalankan perintah browser-sync dan menjalan kan server lalu setiap berkas css, html, dan js di dalam root direktori akan memicu perubahan di peramban ( browser ), folder node_module dikecualikan dan server berjalan di port 8888.

Selanjutnya di root direktori jalankan perintah

npm run start

Perintah tersebut akan memicu terbukanya peramban default seperti berikut:

Pilih index.html lalu silahkan coba, ubah semua berkas html, js, atau css. Seharusnya tampilan akan otomatis berubah:

Sumber:

https://wesbos.com/announcing-my-css-grid-course/