Memanfaatkan Fitur BrowserSync di Laravel 5.3


Umumnya, untuk membuat aplikasi berbasis web, pemrogram menuliskan skrip atau kode di editor teks atau IDE. Kemudian membuka peramban (browser), dan menekan F5 (refresh) untuk memuat ulang halaman. Tidak ada yang salah memang. Tapi, tahukah kalian, kalau memuat ulang halaman — berkali-kali jumlahnya — dengan refresh itu benar-benar membuang waktu?

Hal ini sangat terasa ketika bekerja dengan multi monitor. Memindahkan mouse atau berpindah workspace menjadi begitu menyebalkan. Bukankah lebih nyaman ketika perubahan di skrip terjadi, maka peramban otomatis menampilkan hasil perubahan?

Di Laravel Elixir, terdapat sebuah fitur yang memanfaatkan package BrowserSync. Fitur ini berfungsi memuat ulang peramban secara otomatis ketika pemrogram melakukan perubahan pada skrip dan menyimpannya. Tak hanya berkas HTML, CSS dan JavaScript, namun juga perubahan pada skrip PHP.

Jadi, ketika berpindah dari editor ke peramban, tayangan yang ada pada halaman sudah sesuai dengan perubahan. Cukup menghemat waktu dan tenaga bukan?

Instalasinya sendiri mudah, kita cukup menambahkan potongan skrip di bawah ke dalam berkas gulpfile.js.

elixir(mix => {
    mix.browserSync({
        // using built-in web server
        proxy: 'localhost:8000'
    });
});

Tambahkan juga nama virtual domain yang kita gunakan pada mesin lokal pada konfigurasi BrowserSync seperti contoh skrip.

Secara bawaan, package BrowserSync belum terdaftar dalam aplikasi. Untuk menambahkannya, kita bisa menjalankan perintah di bawah.

$ npm install --save-dev laravel-elixir-browsersync-official

Atau bisa juga menggunakan Yarn.

$ yarn add laravel-elixir-browsersync-official

Ah ya, ngomong-ngomong, package yang diinstal di atas bukanlah official dari BrowserSync, namun package baru yang dikembangkan oleh tim Laravel dengan basis package yang sama. Tentunya, disesuaikan dengan kebutuhan untuk pengembangan web menggunakan Laravel.

Untuk menjalankan fitur ini, jalankan perintah di bawah.

$ gulp watch

Web otomatis akan terbuka di peramban bawaan dengan port 3000.

Dengan menggunakan aksi watch pada Gulp, tak hanya peramban nantinya yang akan dimuat ulang otomatis, tapi juga asset seperti JS dan CSS akan dikompilasi ulang jika ada perubahan.

Ada banyak fitur yang bisa kita manfaatkan dalam penggunaan BrowserSync, daftar opsi yang tersedia dapat kalian lihat pada halaman resmisnya. Cobalah untuk bereksplorasi sendiri. 😉

Langkah selanjutnya, tinggal tulis skrip, simpan, dan lihat perubahan pada peramban. 😄

Tak Berkategori

Yugo Purwanto

Pemrogram PHP dan JavaScript yang sedang sibuk mengembangkan aplikasi Glosarium Bahasa Indonesia.

1 comment

Tinggalkan Balasan