LiveReloadX โค้ดไปชิวไป Refresh Browser อัตโนมัติ

หลายครั้งที่ต้องมานั่งเขียนโค้ดแล้วต้องกลับไปที่ Browser เพื่อกด Refresh ดูผลลัพธ์ ถ้านับเป็นจำนวนตัวเลขวันนึงก็คงไม่ต่ำกว่าพันครั้งได้ จึงทำให้ผมได้หาเครื่องมือที่จะมาแก้ไขปัญหานี้ ทำให้เราโค้ดแล้วไม่ต้องมากด Refresh บ่อยๆ กันอีกต่อไป ซึ่งก็มีหลายวิธี หลายเทคนิคที่ใช้กัน จนมาเจอเครื่องมือที่น่าจะใช้ง่ายและครอบคลุมการใช้งานมากที่สุดก็คือ LiveReloadX นั่นเองครับ เอาเป็นว่าเรามาดูวิธีการใช้กันดีกว่า

LiveReloadX สามารถใช้งานได้ผ่าน Command line โดยสามารถใช้งานได้หลากหลาย Platform และหลายวิธีดังนี้

• ใช้งานง่ายโดยการติดตั้ง (Windows, Mac and Linux are supported)
• ใช้งานง่ายโดยการรัน (Completely free of charge)
• เขียนโค้ดง่ายๆ เพื่ออ่านจาก Source code

LiveReloadX มีการทำงานอย่างไร?

1. ใช้งานผ่าน Command line โดยการพิมพ์คำสั่ง livereloadx path/to/dir
   • ใช้งานด้วย LiveReloadX Server จะรอข้อมูลที่มีการอัพเดทจาก path/to/dir
   • ใช้งานด้วย web server port 35729 ด้วย livereload.js และ จะทำงานด้วย WebSocket server.
2. เมื่อ Browser โหลด livereload.js จะทำการเชื่อมต่อกับ LiveReloadX Server โดยใช้ WebSocket
3. หากมีการแก้ไขภาย Code ใน part/to/dir LiveReloadX Server จะทำการบอก Client (Browser) เพื่อทำการ Refresh Browser ที่โหลดไฟล์ livereload.js ที่ได้เชื่อม WebSocket ไว้
   • เมื่อมีการแก้ไขไฟล์ CSS และ Images จะมีการอัพเดทให้เลยโดยไม่มีการ Refresh Browser

ปล. หากใครไม่อยากใช้งานผ่าน command line ก็สามารถใช้ LiveReload 2 ที่เป็นตัว installer สำหรับติดตั้งทั้งใน OSX, Windows ได้จากที่นี่ครับ http://livereload.com/

วิธีติดตั้ง LiveReloadX Server

1. ดาวน์โหลดและติดตั้ง Node.js ที่เครื่องก่อน
2. รัน npm install -g livereloadใน path ที่โปรเจคงาน
3. เลือกใช้งานโดย Embed JavaScript snippet โดยสามารถดูวิธีการใช้งานได้หัวข้อต่อไป

วิธีการใช้งาน Embed JavaScript snippet

สำหรับการใช้งาน Embed JavaScript snippet ใน HTML นั้น สามารถเปิดใช้งานเพื่อใช้ LiveReload เพื่อให้ Browser ทำการเชื่อมต่อกับ LiveReloadX Server ผ่านทาง Socket เพื่อให้มี Action บอกว่าไฟล์นี้ถูกแก้ไข และจะได้ทำการ Refresh Browser โดยมีวิธีที่สามารถทำได้หลากหลายดังนี้

• Add manually: ใช้งานโดยการเพิ่ม Script JS ในโค้ด HTML
• Browser Extension: ใช้งานโดยการติดตั้ง Extension เพื่อใช้งานใน Browser Safari, Chrome และ Firefox
• Static Mode: ใช้งานโดยการรัน static web server
• Proxy Mode: ใช้งานโดยผ่าน Proxy

Add manually เพิ่ม script ใน HTML

เพิ่ม script ไปในไฟล์ HTML ที่ต้องการ เพื่อทำการใช้งาน LiveReloadX โดยนำ Script ด้านล่างนี้ไปใช้งานได้

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=2"></' + 'script>')</script>

 Browser Extension ติดตั้งผ่าน Extension ใน Web Browser (แนะนำ)

สามารถติดตั้งผ่าน Extension ของ Browser ได้ดังนี้

• Chrome: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
• Safari: http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz
• Firefox: https://addons.mozilla.org/en-US/firefox/addon/livereload/

เพื่อติดตั้งแล้วจะมี icon สำหรับเปิดใช้งานที่ toolbar ได้เลย หรือสามารถดูวิธีการใช้งานทั้งหมดได้ที่นี่ http://livereload.com/extensions/

Static mode ใช้งานโดยการรัน Static web server

สำหรับเว็บที่เป็น static html สามารถใช้วิธีการนี้ได้ โดยการรันด้วย option -s หรือ –static

$ livereloadx -s [-p 35729] [path/to/dir]

สำหรับ static mode นั้น LiveReloadX จะทำงานโดยผ่าน Static Web Server ที่อ้างถึง เช่น http://localhost:35729/foo/ อ้างจาก path/to/dir/foo/index.html ซึ่งวิธีการนี้ LiveReloadX จะทำการเพิ่ม JavaScript snippet ใน HTML ให้อัตโนมัติ

Proxy Mode ใช้งานผ่าน Proxy

ถ้าหากไม่อยากแก้ไขไฟล์ HTML หรือไม่อยากทำตาม 3 วิธีด้านบนที่ผ่านมานั้น สามารถทำการใช้งานด้วย proxy mode ได้ โดยใช้คำสั่ง -y http://example.com/ หรือ –proxy http://example.com/ ได้ เช่น

$ livereloadx -y http://example.com/ [-p 35729] [-l] [path/to/dir]

สำหรับ Proxy mode นั้น LiveReloadX จะทำงานโดยผ่าน Reverse Proxy Server โดยจะดึงข้อมูลจาก http://example.com/ ตัวอย่างเช่น เพื่อเราทำการเข้าเว็บ http://localhost:35729/foo/ จะทำการดึงข้อมูลจาก http://example.com/foo/ มาแสดงให้ผู้ใช้ และเมื่อเกิดการเปลี่ยนแปลงในไฟล์ HTML ก็จะมีการ Refresh ข้อมูลให้เองอัตโนมัติ

คำสั่งสำหรับใช้งาน LiveReloadX

$ livereloadx [-s | -y] [-l] [-p 35927]  [path/to/dir]

  Usage: livereloadx [options] [dir]

  Options:

    -h, --help           output usage information
    -V, --version        output the version number
    --exclude <pattern>  exclude file matching pattern
    --include <pattern>  don't exclude file matching pattern
    -p, --port <port>    change wait port
    -l, --prefer-local   return a local file if it exists (proxy mode only)
    -s, --static         enable static server mode
    -v, --verbose        enable verbose log
    -y, --proxy <url>    enable proxy server mode
    -C, --no-liveCSS     disable liveCSS
    -I, --no-liveImg     disable liveImg```

สำหรับใครที่สนใจอยากนำไปลองใช้กับการทำงาน สามารถอ่านข้อมูลเพิ่มเติมจากเว็บหลักได้ที่นี่ครับ
http://nitoyon.github.io/livereloadx/

Comments