Di dalam tutorial screencast ini kamu akan mempelajari tentang browser reloading–khususnya reloading otomatis–dan kita akan mempertimbangkan tiga metode berbeda untuk melakukannya. Mari kita mulai!

Tonton Screencast

Mari pertimbangkan sebuah alur kerja front-end umum: kamu memiliki sebuah editor code, barangkali kamu sedang menuliskan beberapa HTML, kemudian CSS yang mungkin melibatkan Sass, dan kamu memiliki browser untuk testing. Tiap kali kamu membuat perubahan ke code kamu kembali ke browser, tekan refresh, dan lihat efek perubahanmu.

Itu mungkin tampak seperti prosedur yang cepat, namun menambahkan tindakan refresh ini berulang dan kamu akan menyadarinya cukup membuang waktu. Itu tentunya dapat ditingkatkan. Mari lihat tiga tool yang dapat mengurusi keseluruhan proses refresh untukmu, secara otomatis.

LiveReload

LiveReload telah ada untuk waktu yang lama, dan itu adalah tool yang bagus. Itu hadir dengan aplikasi untuk MacOS dan Windows, dan seharga (pada waktu penulisan ini) $9.99.

Mendapatkan hal-hal berjalan dengan memasukkan sebuah snippet JavaScript di dalam file yang sedang kamu kerjakan, atau gunakan itu dalam kombinasi dengan ekstensi browser. Jika kamu menggunakan ekstensi browser, kamu mungkin perlu memasuki pengaturan ekstensi untuk memastikan bahwa allow access to files dinyalakan.

Tautan Berguna

• LiveReload Chrome extension
• LiveReload Firefox extension
• LiveReload Internet Explorer extension
• Command Line Untuk Desain Web: Live Reload & BrowserSync

Grunt Watch

Jika kamu nyaman menggunakan command line saya sangat menyarankan melihat pilihan ini. Grunt adalah penjalan tugas berbasis lst, dan kamu dapat menggunakan itu untuk mengotomatisasi banyak tugas yang normalnya akan kamu lakukan secara manual–termasuk refreshing browser.

Kita akan menggunakan plugin Grunt Watch (sebenarnya bernama "grunt-contrib-watch") yang akan kamu perlukan untuk dimuat via NPM.

Tugas watch di dalam gruntfile.js termasuk pilihan livereload: true, dan menyaksikan semua file di dalam project saya.

watch: {
    
    files: ['*.*'],
    options: {
        livereload: true
    }

}

Sekali lagi, saya perlu LiveReload extension di dalam browser saya untuk dinyalakan, dan semuanya berkerja sama seperti sebelumnya, dengan manfaat tambahan untuk dapat menjalankan tugas tambahan.

Sumber Grunt

• grunt-contrib-watch di GitHub
• Command Line Untuk Desain Web: Otomatisasi Dengan Grunt

Browsersync

Metode nomor tiga, yang secara cepat menjadi favorit saya, adalah Browsersync. Browsersync lebih dari sekedar utility untuk memuat ulang sebuah halaman web; itu juga mengijinkanmu untuk melakukan uji browser tersinkronisasi.

Untuk mendapatkan hal-hal aktif dan berjalan kamu akan memerlukan Node.js, jadi mulai dengan menginstal itu. Untuk detail tentang bagaimana menjalankan itu, periksa Command Line Untuk Desain Web: Menaklukkan 3rd Party Packages. Dengan Node terinstal, instal Browsersync dengan perintah npm (Node Package Manager) di bawah:

npm install g- browser-sync

Untuk menggunakan Browsersync kita perlu menggunakan perintah lainnya, dan ini akan berubah tergantung pada tepatnya apa yang in ketika lakukan. Sebagai contoh, perintah ini akan mengatur lingkungan server statis, dan menyarankan bahwa Browsersync menyaksikan semua file untuk memuat ulang:

browser-sync start --server --files "*.*"

Untuk lebih mendetail tentang berbagai perintah yang dapat kamu gunakan, periksa dokumentasi.

Tautan Berguna

• browsersync.io
• Browsersync docs
  

Kesimpulan

Sekian! Saya harap tutorial ini telah meyakinkanmu untuk berhenti membuang waktu dan mencoba paling tidak salah satu metode refresh browser ini. Jika kamu memiliki metode lainnya yang lebih kamu suka, beritahu kami di dalam komentar!