Naruepat.com
  • Home
  • Lifestyle
  • Travel
    • Eat
      • Chiang Mai
  • E-Commerce
  • Social Media
  • Programming
    • Knowledge
    • 3rd Party
    • Laravel
      • Resolve
      • Packages
  • About Me

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

Naruepat Payachai/03 Feb, 17/282/0
Tools

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

แก้ไขไฟล์และกดบันทึก Browser จะ Refresh เองอัตโนมัติ

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

livereloadsublimetoolsvs code
Naruepat Payachai
Naruepat Payachai (Set) - Senior Supervisor Software Engineer & Full stack Web/eBusiness Developer & Digital Marketer นอกจากชอบเขียนเว็ปแล้ว ผมยังชื่นชอบ Gadgets IT ต่างๆ และเวลาว่างๆ ก็ชอบออกไปเที่ยวเพื่อพักผ่อนและหาอะไรใหม่ๆ ให้กับชีวิตอยู่เสมอ

Related Posts

Social Media

Facebook feature usage limits ข้อจำกัดต่างๆ ของเฟสบุ๊ค

Knowledge

เคล็ดไม่ลับ ต่ออายุโดเมน Godaddy ในราคาถูกโดยไม่ต้องใช้ค...

LifestyleTravel

เที่ยวถ่ายรูปดอก “พญาเสือโคร่ง” ที่โรงเรียนบ...

Popular Posts

Social Media

ลบเพื่อนใน Facebook ง่ายๆ เร็วๆ ด้วย Chrome Extension กั...

Lifestyle

14km กับการถ่าย “พรีเวดดิ้ง แนวสตรีท” ของผมท...

Social Media

ชวนเพื่อนทั้งหมดมากด Like Facebook Fanpage ด้วยวิธีง่ายๆ

Lifestyle

923 วัน กับความทรงจำดีๆ ที่ THiNKNET Co., Ltd.

หมวดหมู่

  • E-Commerce (7)
  • Eat (1)
    • Chiang Mai (1)
  • Lifestyle (15)
  • Programming (13)
    • 3rd Party (1)
    • Knowledge (6)
    • Laravel (4)
      • Packages (1)
      • Resolve (1)
    • Tools (3)
  • Social Media (5)
  • Travel (6)

เรื่องล่าสุด

  • Facebook feature usage limits ข้อจำกัดต่างๆ ของเฟสบุ๊ค
  • เคล็ดไม่ลับ ต่ออายุโดเมน Godaddy ในราคาถูกโดยไม่ต้องใช้คูปองส่วนลด
  • เที่ยวถ่ายรูปดอก “พญาเสือโคร่ง” ที่โรงเรียนบรรพตวิทยา ดอยผาตั้ง อ.เวียงแก่น จ.เชียงราย
  • สรุปเรื่องราวชีวิตของตัวเอง เก็บความทรงจำดีๆ ที่ผ่านมาตลอดปี 2560
  • ซื้อบ้านครั้งแรกในชีวิต จะต้องเตรียมตัวอย่างไรบ้าง??

Follow Us

Tags

CAMP DIY E-Commerce file manager Framework image resize image upload Introduction Laravel package PHP seo slug startup THiNKNET tools url friendly watermark web 2.0 web 3.0 will you marry me การพัฒนาเว็บไซต์ การเริ่มต้น การใช้ชีวิต ของชำร่วย ขอแฟนแต่งงาน ข้อคิด จัดการไฟล์ ตลาดในประเทศไทย ถ่ายรูป ที่พัก พนักงานออฟฟิศ พรีเวดดิ้ง ย้ายงาน ลาออก วิเคราะห์ สตรีท อัพโหลดรูป เก็บรูปภาพ เซอร์ไพรส์ เตรียมงาน เทคนิคขายของ เริ่มต้นขายของออนไลน์ แคมป์ แต่งงาน

About US

I'm Naruepat Payachai

ผมรักการเขียนโค้ดเป็นชีวิตจิตใจตั้งแต่เรียนจบมหาวิทยาลัย พร้อมกับทำงานในสายนี้หลายปี นอกจากเป็น Web Programmer แล้ว ก็ยังชอบ E-Commerce เป็นอย่างมาก และเวลาว่างๆ ผมก็ชอบไปท่องเที่ยวสถานที่ต่างๆ เพื่อพักผ่อนและหาไอเดียร์ใหม่ๆ มาใช้กับการทำงาน

ซึ่งผมเลยอยากเก็บประสบการณ์ ความรู้ และสิ่งที่ผมสนใจมาเก็บไว้ในบล็อกนี้ อย่างน้อยในอนาคตเราก็จะได้ย้อนกลับมาดูว่า ที่ผ่านมาเราทำอะไรไปบ้าง

Recent Posts

Facebook feature usage limits ข้อจำกัดต่างๆ ของเฟส...

01 Mar, 19

เคล็ดไม่ลับ ต่ออายุโดเมน Godaddy ในราคาถูกโดยไม่ต้...

22 Jan, 18

เที่ยวถ่ายรูปดอก “พญาเสือโคร่ง” ที่โรง...

21 Jan, 18

สรุปเรื่องราวชีวิตของตัวเอง เก็บความทรงจำดีๆ ที่ผ่...

31 Dec, 17

Instagram

Copyright © 2016 Naruepat.com.