Grunt Watch กับ livereload เครื่องมือที่ช่วยให้นักพัฒนาเว็บไซต์สบายได้อีก

ผมได้เขียนบทความเกี่ยวกับ Grunt Watch รัน PHPUnit ที่ช่วยลดงานเล็กๆ น้อยๆ แต่ก็ช่วยให้เราทำงานได้รวดเร็วมากยิ่งขึ้น มาบทความนี้ผมก็จะเอา Grunt Watch มาช่วยให้เราทำงานได้เร็วขึ้นอีกเช่นกันครับ แต่คราวนี้เอามาใช้ในส่วนที่เกี่ยวข้องกับ browser กันซักหน่อย

สำหรับนักพัฒนาเว็บไซต์หรือที่เรียกๆ กันว่า web developer นั้น วันๆ นี่ไม่รู้ว่าต้อง  reload browser กันวันละกี่ครั้งในการทำงาน ไม่ว่าจะเป็นแก้ไข css, html, javascript, php พอแก้เสร็จก็ต้องมา reload  browser ดูผลลัพธ์ที่แก้ไขไป

เดี๋ยวเรามาลองใช้ Grunt Watch ช่วย reload browser ให้เรากันดีกว่า ผมคิดว่าทุกคนที่ค้นมาเจอบทความนี้น่าจะติดตั้ง grunt ไว้แล้วนะครับ เรามาเริ่มกันเลยดีกว่า

1. ติดตั้ง Grunt Watch

   npm install grunt-contrib-watch --save-dev

   ที่ใส่ option –save-dev ก็เพื่อจะให้เพิ่ม package grunt-contrib-watch เข้าไปในไฟล์ package.son ให้อัตโนมัติครับ

2. สร้างไฟล์ Gruntfile.js

   module.exports = function (grunt) {
     grunt.initConfig({
       watch: {
         css: {
           files: ['**/*.css'],
           options: {
             livereload: true
           }
         },
         html: {
           files: ['*.html'],
           options: {
             livereload: true
           }
         }
       }
     });
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.registerTask('default', ['watch'])
   };

   เราจะ watch อยู่ 2 อย่างก็คือ
   1. css (file: [‘**/*.css’])
   2. html (files: [‘**/*.html’])
   และพระเอกของงานก็จะอยู่ในส่วน livereload: true

3. เพิ่ม script livereload ที่จะรอรับคำสั่งจาก Grunt Watch เมื่อมีการแก้ไขและบันทึกไฟล์

   <script src="//localhost:35729/livereload.js"></script>

4. รันคำสั่ง grunt จากนั้นก็ลองเข้าไปที่หน้าเว็บที่เรากำลังแก้ไขอยู่และลองแก้ไขไฟล์ css, html ดูว่าจะมีการ reload browser ให้เรารึป่าว
   

ถ้าจะให้ดีก็จัด workspace ของเราให้เห็นทั้ง editor และ browser จะได้เห็นการเปลี่ยนแปลงได้ทันทีตอนเราแก้ไขงาน หรือถ้ามีตังค์ขึ้นมาหน่อยก็ถอยจอซักจอเอามาต่อเข้าเครื่องคอมพิวเตอร์อีก ซึ่งทุกวันนี้นักพัฒนาเว็บไซต์น่าจะมีการใช้งาน 2 จออยู่แล้วว่ามั๊ย ^^