LiveReload on Sublime Text 3

การติดตั้ง LiveReload บน Sublime Text 3

LiveReload คือแพ็กเกจตัวหนึ่งบน Sublime Text 3 ที่จะช่วยให้เราทำงานในการเขียนเวบไซต์ได้ง่ายขึ้น โดยเมื่อเราเขียนโค๊ดสร้างเวบไซต์แล้วทำการบันทึก เบราเซอร์ของเราจะทำการเปลี่ยนแปลงค่าให้โดยอัตโนมัติในรูปแบบ Live แพ็กเกจนี้จะทำหน้าที่อัพเดททั้งในส่วนของ HTML และ CSS วิธีการใช้งานนั้นเราจะต้องทำการติดตั้งโปรแกรมดังกล่าวทั้งบน Sublime Text 3 และบนเบราเซอร์เพื่อเชื่อมต่อการทำงานถึงกัน

การติดตั้ง Package บน Sublime Text 3

  1. ให้เราไปที่ Preferences > Package Control พิมพ์คำสั่ง Install Package แล้วทำการค้นหาชื่อ LiveReload ทำการเลือก โปรแกรมจะทำการบันทึกแพ็คเกจเข้าไปในโปรแกรม Sublime Text 3
  2. ให้ไปที่ Preferences > Package Setting > LiveReload แล้วทำการ enabled plugin ด้านล่าง โดยให้ใส่ข้อมูลเป็น
  3. เราจะต้องทำการปิดโปรแกรม Sublime Text 3 แล้วเปิดขึ้นมาใหม่อีกครั้ง เพื่อใช้งาน

การติดตั้งโปรแกรม LiveReload บนเบราเซอร์
การติดตั้งโปรแกรมนี้บนเบราเซอร์จะช่วยให้เราสามารถเปิดและปิดการใช้งาน LiveReload ได้
วิธีการติดตั้งของแต่ละเบราเซอร์มีความแตกต่างกัน โดยเราสามารถดาวน์โหลดไฟล์ส่วนขยายได้จากลิงก์ที่ชื่อเบราเซอร์ดังต่อไปนี้

  • Safari อย่างไรก็ตาม Safari นั้นเราไม่สามารถใช้งานร่วมกับไฟล์บน local file ได้ หากต้องการใช้งานแนะนำให้ไปใช้เบราเซอร์ Chrome หรือใส่ Script snippetการใช้ Script นี้ เราจะต้องทำการนำ Script ดังกล่าวไปไว้ในไฟล์ HTML ที่เราสร้างไว้ โดยให้อยู่ก่อนปิดแท็ก Body
    • ในกรณีที่เป็น file URL ให้ใช้ Script นี้
    • ในกรณีที่เวบไซต์ของเราใช้งานบนเซิฟเวอร์อีกเครื่อง เราจะต้องทำการระบุ IP Address ของเครื่องคอมพิวเตอร์นั้น ห้เราใช้ Script นี้

      การใช้ Script ทั้งหมดนอกจากจะใช้สำหรับ Safari แล้ว เรายังสามารถใช้งานได้กับเบราเซอร์ที่ทาง LiveReload ไม่สนับสนุนอื่นๆ หรือต้องการทดสอบบนมือถือหรือแท็บเลตเป็นต้น
  • Chrome ถ้าเราต้องการให้ LiveReload ทำงานบน local files ให้เราทำการเปิดการใช้งานในส่วนขยาย (Extension) โดยไปที่ Tools > Extensions > LiveReload หลังจากการติดตั้ง ทำการเปิดใช้งานที่ อนุญาตให้เข้าถึงไฟล์ URLs (Allow access to files URLs)

    LiveReload Extension
    LiveReload Extension
  • Firefox ให้ดาวน์โหลดโปรแกรมจากลิงก์ addons.mozilla.org แล้วทำการติดตั้ง

เราจะทำการติดตั้ง LiveReload บนเบราเซอร์ Chrome ผลที่ได้จะแสดงไอคอนที่ด้านบนของ Chrome ดังนี้ livereload-disabled ในกรณีที่เปิดการใช้งานปุ่มด้านในสีขาวจะเปลี่ยนเป็นสีดำ livereload-enabled
เมื่อเราจะใช้งาน ให้เราลองสร้างไฟล์ HTML ขึ้นมา 1 ไฟล์ เช่น index.html ดังนี้

เมื่อเราทำการ บันทึก ทำการเปิดเวบเบราเซอร์ จะเห็นว่าหน้าตาของเวบจะเปลี่ยนไปโดยอัตโนมัติ

result-of-livereload
Result of LiveReload

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.