GUARD LIVERELOAD

GUARD LIVERELOAD

REFRESH BROWSER
Bagi pengembang aplikasi berbasis web, setelah melakukan pengkodean, langkah untuk melihat hasil perubahan pada peramban (browser) tentu harus dilakukan refresh dengan menekan tombol F5, tinggalkan cara itu sekarang juga karena ada cara agar anda tidak perlu melakukan refresh pada browser anda.

GUARD
Guard adalah perangkat berbasis command line yang menggunakan bahasa pemrograman Ruby, yang berfungsi untuk melakukan action pada saat sebuah file mengalami perubahan. Sedangkan guard-livereolad adalah pengembangan dari guard itu sendiri.

MEMASANG GUARD LIVERELOAD
Pada artikel ini sistem operasi yang digunakan adalah Linux Ubuntu 12.04 untuk pengguna Microsoft Windows bisa mengunjungi laman ini sedangkan untuk pengguna MacOs bisa mengujungi laman ini.
Pada ubuntu ketikkan perintah di bawah ini, kemungkinan akan ada dependencies library pada komputer anda, tetapi pada komputer saya tidak ada kendala.

apt-get install rubygems ruby-dev
gem install guard-livereload


KONFIGURASI GUARD LIVERELOAD

Ada beberapa cara mengkonfigurasi guard livereload, namun cara yang termudah adalah dengan membuat sebuah config file (.Guardfile) pada direktori /var/www untuk ubuntu.

guard :livereload do
  watch(%r{.+.(css|js|php)$})  
end

File konfigurasi diatas akan memeriksa perubahan file dengan ekstensi .css, .js dan .php untu menambah ekstensi file yang akan diperiksa tinggal memasukkan ekstensi baru.

PLUGIN BROWSER

Satu komponen yang terakhir agar livereload bisa berjalan adalah plugin livereload sesuai dengan browser anda, berikut adalah link untuk bebrapa browser, ChromeSafari dan Firefox.

MENJALANKAN GUARD LIVERELOAD
Untuk menjalankan guard livereload, buka terminal dan arahkan pada direktori localhost, pada ubuntu ada di /var/www, lalu ketikkan perintah bundle exec guard. Apabila perintah benar akan muncul info bahwa “guard is now watching at ‘/var/www’.

Langkah terakhir adalah dengan mengkatifkan plugin guard livereload pada peramban anda, dengan mengklik ikon yang dilingkari garis hijau.

Selesai kini anda bisa bebas melakukan koding dan langsung bisa melihat perubahan pada peramban tanpa merefresh, keren bukan? :)

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *