Gulp.js คืออะไร ? + สอนวิธีใช้

gulp.js

ในการทำเว็บไซต์นั้น มักจะมีงานจุกจิกๆ มากมายที่เราทำกันจนชิน จนบางทีเราอาจลืมคิดไปเลยว่าเราเสียเวลาไปกับมันมากขนาดไหน ไม่ว่าจะเป็นการปรับคุณภาพของรูป การบีบอัดไฟล์ html, css และ js หรือแม้กระทั่งการรีเฟรชหน้าเว็บหลังจากที่เราได้แก้ไขโค้ดบางอย่างไป บทความนี้เราเลยจะมาพูดถึง tool ที่จะมาทำให้ปัญหาเหล่านี้หมดไปอย่าง gulp.js ลองมาดูกันว่ามันจะช่วยเราได้มากขนาดไหน

gulp.js คืออะไร

gulp.js เป็น tool ที่เหมือนเป็น “คนใช้” ที่จะช่วยทำ task ต่างๆ แทนเรา แต่เดิมเราอาจต้องทำ task เหล่านั้นเอง แต่ถ้าเราใช้ gulp.js เราก็แค่บอก gulp.js ว่า task ทั้งหมดที่จะต้องทำมีอะไรบ้าง ที่เหลือก็แค่สั่งให้ gulp.js เริ่มทำงานเท่านั้นเอง

แล้วเราสั่งให้ gulp.js ทำอะไรได้บ้าง ?

task ต่างๆ ที่เราจะให้ gulp.js ช่วยทำนั้น เราจะต้องเขียนให้อยู่ในรูปของ JavaScript แต่ไม่ต้องกังวลว่าถ้าเราไม่เก่ง JavaScript แล้วจะทำไม่ได้ เพราะว่ามีผู้ใจดีมากมายที่เขียน task ต่างๆ มาให้เราเอาไปใช้ฟรีๆ ซึ่ง task ยอดนิยมที่คนมักขอให้ gulp.js ช่วยทำมีดังนี้

  • Compileคอมไพล์ไฟล์ Sass/Compass หรือ LESS ให้กลายเป็นไฟล์ CSS
  • Minifyย่อไฟล์ HTML, CSS และ JS รวมไปถึงรูปต่างๆ ให้มีขนาดเล็กลง
  • Combineรวมไฟล์ CSS หรือ JS หลายๆ ไฟล์ให้กลายเป็นไฟล์เดียวกัน
  • Refreshรีเฟรช Web Browser

ลองคิดดูว่าถ้าเราไม่ต้องมาทำ task เหล่านี้เองแล้ว เราจะทำเว็บได้เร็วขึ้นขนาดไหน ?

ลองใช้ gulp.js

เมื่อเราพอจะเข้าใจภาพรวมของ gulp.js แล้ว เราก็มาลองใช้มันดูเลยดีกว่า (เนื่องจาก gulp.js นั้นเป็น package ของ Node.js เราจึงควรมีพื้นฐานเกี่ยวกับ Node.js มาบ้าง)

1. ติดตั้ง gulp.js

อย่างแรกเลยให้เราติดตั้ง gulp.js ก่อน โดยการติดตั้งนั้น เราจะต้องทำอยู่ 2 ที่ด้วยกัน ดังนี้

1.1 Global

การติดตั้งที่ global นี้ เป็นการทำให้เราสามารถใช้คำสั่งของ gulp.js ใน command-line ได้ โดยเราจะทำเพียงแค่ครั้งเดียวเท่านั้น (งานหน้าไม่ต้องติดตั้งแบบนี้แล้ว) ให้เราพิมพ์คำสั่งด้านล่างนี้

แต่ถ้าใครใช้ Mac อยู่ก็ให้ใส่ sudo เข้าไปข้างหน้าด้วย แบบนี้

เพียงเท่านี้ เราก็จะสามารถใช้คำสั่งของ gulp.js ใน command-line ได้แล้ว

1.2 Local

ต่อมาเราจะต้องติดตั้ง gulp.js แบบ local ด้วย ซึ่งก็คือการติดตั้ง gulp.js เอาไว้ที่ folder งานของเรานั่นเอง ให้เรา cd เข้าไปที่ folder งานของเราก่อน

จากนั้นก็ให้เรารันคำสั่งตามด้านล่างนี้

หมายเหตุ: หากเราจะใช้ gulp.js กับงานไหน เราก็จะต้องติดตั้ง gulp.js แบบ local เอาไว้ที่ folder งานนั้นๆ เสมอ

2. กำหนด Task ต่างๆ ลงในไฟล์ gulpfile.js

ต่อมาเราจะต้องระบุว่าเราต้องการจะให้ gulp.js ช่วยทำอะไรบ้าง ให้เราสร้างไฟล์ที่มีชื่อว่า gulpfile.js ขึ้นมา แล้วใส่ task ต่างๆ ลงไปในไฟล์ โดยใช้รูปแบบนี้

เพื่อเป็นการทดสอบว่า gulp.js ทำงานได้แล้ว เราอาจสร้าง task ง่ายๆ ขึ้นมา ลองดู task ต่อไปนี้

3. รัน gulp.js

เมื่อเราสร้าง task ง่ายๆ เรียบร้อยแล้ว สุดท้ายก็มาถึงการสั่งให้ task นั้นทำงาน ให้เราใช้คำสั่งในรูปแบบนี้

เนื่องจากเราได้สร้าง task ชื่อ “siamhtml” เอาไว้แล้ว เราก็เลยจะสั่ง gulp.js ให้ลองทำ task นี้ดู

เมื่อลองรันดู เราก็จะเห็นข้อความ “SiamHTML” ขึ้นมาจริงๆ เราใช้ gulp.js เป็นแล้ว !

ลองใช้ Plugin ของ gulp.js

แน่นอนว่าในการใช้งานจริง เราคงไม่มานั่งเขียน task ยากๆ ขึ้นมาใช้เอง แต่เราจะโหลด plugin ดีๆ ของ gulp.js มาใช้เลย ลองมาดู plugin ที่น่าสนใจกันดีกว่า

  • Sass (gulp-ruby-sass)คอมไพล์ Sass/Compass ให้เป็น CSS
  • Minify HTML (gulp-minify-html)ย่อไฟล์ HTML ให้เล็กลง
  • Minify CSS (gulp-minify-css)ย่อไฟล์ CSS ให้เล็กลง
  • Uglify (gulp-uglify)ย่อไฟล์ JS ให้เล็กลง
  • Minify รูป (gulp-imagemin)ย่อไฟล์รูปให้มีขนาดเล็กลง
  • Concat (gulp-concat)รวมไฟล์ JS หลายๆ ไฟล์ ให้กลายเป็นไฟล์เดียว
  • Refresh (browser-sync)รีเฟรช Web Browser

เมื่อเลือก plugin ที่ถูกใจได้แล้ว ก็ให้ลองติดตั้งดู สำหรับวิธีติดตั้ง plugin ของ gulp.js นั้นก็ไม่ยากเลย เพราะจะเหมือนกับการติดตั้ง package ของ Node.js ทั่วไป ซึ่งมีบอกไว้ในหน้า plugin นั้นๆ อยู่แล้ว

ลองติดตั้ง Plugin สำหรับคอมไพล์ Sass

สมมติว่าเราจะติดตั้ง plugin gulp-ruby-sass ก็ให้เราพิมพ์คำสั่งนี้ (มีบอกในหน้าเว็บหลักของ plugin)

จากนั้น เราก็ต้องเข้าไปเพิ่ม task ใน gulpfile.js (มีบอกในหน้าเว็บหลักของ plugin)

จากนี้ไป เวลาเราจะคอมไพล์ไฟล์ Sass ให้เป็นไฟล์ CSS เราก็แค่พิมพ์คำสั่งนี้

กำหนด Default Task ให้ gulp.js

ในอนาคต หากเรามี task จำนวนมาก แล้วเราอยากสั่งให้ทำหลายๆ task เลยในทีเดียว เราก็อาจกำหนด task เหล่านั้นให้ทำพร้อมกับ default task ไปเลยก็ได้ แบบนี้

แต่ในตอนนี้เรามีแค่ task “sass” เพียง task เดียว หากเราจะให้ task นี้ ทำพร้อมกับ default task ไปเลย เราก็จะเขียนแบบนี้

จากนี้ไป เวลาเราจะสั่งให้ task “sass” ทำงาน เราก็สามารถพิมพ์สั้นๆ แบบนี้ได้เลย

หากลองดูที่ console เราก็จะเห็นว่า gulp.js นั้นเริ่มทำ task “sass” ก่อน แล้วตามด้วย task “default” ซึ่งในตอนนี้เป็นแค่ task เปล่าๆ

รู้จักกับ Watch ของ gulp.js

บางคนอาจจะสงสัยว่า gulp.js จะมีประโยชน์อะไร ในเมื่อเราก็ต้องมานั่งพิมพ์คำสั่งเพื่อบอกให้มันทำงานอยู่ดี ให้มันรู้เองเลยได้มั้ยว่ามันควรจะทำตอนไหน ? คำตอบคือสามารถทำได้ เพราะ gulp.js มาพร้อมกับความสามารถในการเฝ้าดูการเปลี่ยนแปลงของไฟล์ต่างๆ (Watch) นั่นหมายความว่าเราสามารถสั่งให้ gulp.js ทำงานเมื่อตรวจพบว่ามีการแก้ไขไฟล์ได้นั่นเอง

สมมติว่าเราอยากจะให้ gulp.js ทำ task “sass” ทุกครั้งที่มีการแก้ไขไฟล์ scss เลย ก็ให้เราก็เพิ่มโค้ด watch ไปที่ default task แบบนี้

จากนั้นก็สั่งให้ default task ทำงานเหมือนเดิม

สิ่งที่เกิดขึ้นก็คือ task “sass” จะเริ่มทำงานก่อน โดยการคอมไพล์ไฟล์ scss ทั้งหมดในขณะนั้นให้เป็น css เมื่อคอมไพล์เสร็จแล้ว task “default” ก็จะเริ่มทำงาน โดยการเฝ้าดูอย่างต่อเนื่องว่ามีไฟล์ scss อันไหนเปลี่ยนแปลงบ้าง ถ้ามีก็จะสั่งให้ task “sass” ทำงานทันที เพื่อคอมไพล์ไฟล์ scss นั้นๆ ให้เป็นไฟล์ css จากนี้ไป เวลาเราจะแก้ไฟล์ scss เราก็ไม่ต้องมาคอมไพล์ให้เป็น css เองอีกต่อไปแล้ว

หมายเหตุ: watch ของ gulp.js นั้น เป็น process ต่อเนื่อง คือหลังจากที่เราสั่งให้มันทำงานแล้ว มันก็จะไม่หยุด watch จนกว่าเราจะยกเลิกเองด้วยการกดปุ่ม Ctrl + c หรือ control + c

เสริมความสามารถด้วย BrowserSync

ถึงแม้ว่าเราไม่ต้องมาคอมไพล์ไฟล์ให้เป็น css เองแล้ว แต่เราก็ยังต้องมากดปุ่มรีเฟรช web browser เองอยู่ดี ลองนึกดูว่าเวลาเราทำ responsive web เราก็จะต้อง test กับ device มากมาย การต้องมารีเฟรชทุกๆ device ทุกครั้งที่มีการแก้โค้ดก็คงไม่ค่อยสะดวกเท่าไรนัก

เพื่อให้การทำเว็บเป็นไปอย่างราบรื่นมากขึ้น ให้เราติดตั้ง plugin ที่มีชื่อว่า “BrowserSync” เพิ่มเข้ามาอีกตัว

ความสามารถของ BrowserSync ก็คือ มันจะสามารถสั่งให้รีเฟรช web browser ทั้งหมดที่เปิดหน้าเว็บที่ระบุไว้ได้ ไม่ว่าจะอยู่ใน device ไหนก็ตาม แค่พูดอาจยังไม่ค่อยเห็นภาพ เรามาลองใช้กันเลยดีกว่า ให้เราเข้าไปเพิ่ม task ต่อไปนี้ ใน gulpfile.js (มีบอกในหน้าเว็บหลักของ plugin)

สุดท้ายก็ให้เรากำหนดให้ task “browser-sync” ทำพร้อมกับ default task ไปเลย

จากโค้ดด้านบน จะเห็นว่าเราได้ watch ไฟล์ html และ css เพิ่มด้วย เพราะเราต้องการจะให้ BrowserSync ช่วยรีเฟรช web browser เมื่อไฟล์เหล่านี้มีการเปลี่ยนแปลงนั่นเอง (ด้วยคำสั่ง browserSync.reload)

เมื่อทุกอย่างพร้อมแล้ว ก็สั่งให้ default task ทำงานเหมือนเดิม

เมื่อสั่งให้ gulp.js เริ่มทำงาน สิ่งที่ต่างไปจากครั้งก่อนๆ ก็คือ default web browser ของเราจะเปิดหน้าเว็บที่เราทำอยู่ขึ้นมาโดยอัตโนมัติ ที่เป็นเช่นนี้ก็เพราะผลจาก task “browser-sync” นั่นเอง จากนั้นให้เราลองแก้ไขโค้ด html, css หรือ  scss ดู เราก็จะพบว่าหน้าเว็บนั้นอัพเดทตามในทันที โดยที่เราไม่ต้องทำอะไรเลย

หากเราสังเกตที่ URL ก็จะพบว่าเป็น URL ที่ task “browser-sync” สร้างมาให้โดยเฉพาะ ตัวอย่างเช่น http://localhost:3000/ เป็นต้น ให้เราใช้ URL นี้ในการ test เสมอ เพราะมิฉะนั้น เราจะไม่ได้ความสามารถในการรีเฟรชของ BrowserSync เลย (แต่ถ้าจะ test กับ device อื่นๆ ก็ให้ใส่เป็น IP Address ตามปกติ แต่ขอให้ระบุ Port เดียวกันกับที่ BrowserSync กำหนดมาให้ เช่น http://192.168.1.xxx:3000 เป็นต้น)

บทสรุปการใช้ gulp.js

จะเห็นว่า gulp.js ช่วยให้เราเอาเวลาไปโฟกัสที่การเขียนโค้ดมากขึ้น เพราะว่างานอื่นๆ gulp.js จะทำแทนเราทั้งหมด และหากใครมี 2 จอ การใช้ gulp.js ก็จะยิ่งมีประโยชน์มากขึ้นไปอีก เนื่องจากเราสามารถเขียนโค้ดจอนึง แล้วดูพรีวิวอีกจอนึงได้ทันที จริงๆ แล้ว gulp.js ยังสามารถทำอะไรได้มากกว่านี้อีก ขึ้นอยู่กับเราแล้วว่าจะสามารถนำ plugin ต่างๆ มาประยุกต์ใช้ให้เหมาะกับงานได้มากน้อยแค่ไหน ?

(Visited 23,797 times, 8 visits today)

35 Responses to “Gulp.js คืออะไร ? + สอนวิธีใช้”

  1. น่าสนใจมากเลยทีเดียว

  2. มันจะ รีเฟรช Web Browser ให้เราตอนไหนหรอครับ มันจะรู้ได้อย่างไรว่าเราต้องการให้ รีเฟรชตอนไหนหรอครับ

  3. ใช้ Watch ครับ สังเกตว่าเราต้องเพิ่มโค้ด Watch ใน default task หลังจากที่ติดตั้ง ฺBrowserSync ด้วยครับ
    โดยโค้ดที่เพิ่มไปนั้น จะเป็นการเฝ้าดูว่าถ้ามีการแก้ไฟล์ html หรือ css เราก็จะสั่งให้ BrowserSync ช่วยรีเฟรช web browser ให้ครับ ^_^

  4. เพิ่งรู้จักตัวนี้จาก google web starter kit ครับ
    ตอนเขียน angular รู้สึกว่าใช้ grunt แล้วทำได้เหมือนกับ gulp เลย

    พอจะรู้ความต่างกันไหมครับ ระหว่าง grunt vs gulp

  5. ทั้ง grunt.js และ gulp.js ต่างก็ทำหน้าที่คล้ายๆ กันครับ แต่จะต่างกันตรงที่…
    1. กลไกการทำงาน – gulp.js จะใช้ pipe ทำให้ทำงานได้เร็วกว่า grunt.js
    2. syntax – syntax ของ gulp.js สั้นกว่า อ่านง่ายกว่า แม้คนที่ไม่ได้ถนัด JS มากนัก ก็ยังพอเข้าใจได้
    3. Community – grunt.js ออกมาก่อน จึงมีคนใช้เยอะกว่า และมี plugin ให้เลือกใช้มากกว่า

    ส่วนตัวผมใช้ทั้ง 2 อัน นะครับ โดยจะใช้ gulp.js เป็นหลัก แล้วค่อยใช้ grunt.js กับงานที่ gulp.js ไม่มี plugin มาให้ครับ ^_^

  6. ไซเออร์ นักเรียนเงียบ says:

    Juice Nutthakit Zeus Zeng Ichsarut Yauvasuta Chocogirl Pui Pui บทความนี้โอเคเลยนะ

  7. เดี๋ยวลองอ่าน :)

  8. ทำไมผมติดตั้ง Local ใน Project โดยพิมคำสั่ง
    npm install –save-dev gulp
    มันรันแล้วไม่เห็นมีอะไร ขึ้นมา ใน Project ผมเลยครับ

  9. ทำไมผมติดตั้ง Local ใน Project โดยพิมคำสั่ง
    npm install –save-dev gulp
    มันรันแล้วไม่เห็นมีอะไร ขึ้นมา ใน Project ผมเลยครับ

  10. มันจะเข้ามาอยู่ในโฟลเดอร์ node_modules อะครับ ลองดูว่ามีมั้ย

  11. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย ได้แล้วครับ ขอบคุณมาก Browser Sync แจ่มจริงๆ

  12. ใช้กับ .php ไม่ได้ใช่ไหมครับ ?

  13. ใช้ได้นะครับ ให้แก้ตรง task ของ browser-sync ที่ gulpfile.js ให้เป็นแบบนี้ครับ

    // Start BrowserSync
    gulp.task('browser-sync', function() {
    browserSync({
    proxy: {
    host: "localhost/siamhtml",
    port: 80
    }
    });
    });

    แล้วลองรัน task นี้ดูครับ เราจะเห็นข้อความจาก browser-sync บอกให้เรา copy โค้ด JS ชุดหนึ่งไปใส่ในหน้าเว็บของเราครับ ก็ให้เราทำตามที่มันบอก หลังจากที่ใส่เรียบร้อยแล้ว เวลาจะใช้ก็ให้เข้า localhost/siamhtml/ ได้เลยครับ (ไม่ต้องเข้า localhost:3000 อีกต่อไป เพราะเราใช้ proxy แล้ว)

  14. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย เอา js ไปใส่ไว้ในไฟล์ php รึเปล่าครับ ลองแล้วมันไม่ได้ครับ

  15. Kittikom Sangrit ใส่ JS ชุดนี้ไว้ทุกหน้าเว็บเลยครับ
    <script type='text/javascript'>//<![CDATA[
    document.write("<script async src='//HOST:3000/browser-sync-client.1.3.3.js'></script>".replace(/HOST/g, location.hostname));
    //]]></script>

  16. sass / พอคอมไพล์ไฟล์ Sass มันไม่เห็นได้ ไฟล์ css เลยอะครับ

  17. sass / พอคอมไพล์ไฟล์ Sass มันไม่เห็นได้ ไฟล์ css เลยอะครับ

  18. ได้ติดตั้ง Sass ไว้ในเครื่องแล้วหรือยังครับ
    ถ้าติดตั้งแล้ว ตอนรัน task compile มันมี error อะไรขึ้นมามั้ยครับ
    ลองสังเกตดูที่ command-line อะครับ

  19. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย

    มัน ขึ้นแบบนี้ครับ

    [10:36:24] gulp-ruby-sass: stderr: 'sass' is not recognized as an internal or ex
    ternal command,
    operable program or batch file.

  20. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย

    Compile ไม่ได้จริงๆคับ

  21. Gongkang Gong
    อ๋อ ถ้าขึ้นอย่างนี้แก้ตามลิ้งค์นี้ได้เลยครับ
    http://stackoverflow.com/questions/22115610/sass-compiler-not-working-in-sublime-text-3

  22. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย

    ขอบคุณครับ

    แต่ผมลองแล้วก็ยังไม่ได้อยู่ดี เอา C:Ruby192bin ไปใส่ใน PATH แล้วก็เหมือนเดิม

  23. Gongkang Gong

    อาการมันเหมือนหาตัว execute Sass ไม่เจออะครับ ลองพิมพ์ sass -v ใน command-line ดู ถ้าไม่ขึ้นเลขเวอร์ชันมาแปลว่ายังไม่ work ครับ ต้องไปไล่ดูว่าเราได้ติดตั้ง sass เอาไว้ที่ไหน แล้วไปกำหนด PATH ให้ตรงอะครับ

  24. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย

    ผมต้องลง Program Ruby ด้วยใช่หรือป่าวคับ

  25. Gongkang Gong
    ต้องลงนะครับ ไม่งั้นจะใช้ Sass ไม่ได้อะครับ

  26. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย

    ได้แล้วครับ ขอบคุณมากๆ เลยคับ ^_^

  27. ถ้าเรื่องที่คืดว่าเสียเวลาที่สุดน่าจะเป็นการรีเฟรชครับ
    แต่แก้ปัญหาเรื่องนั้นด้วย
    การทำตรงๆ จากใน devtools
    จนกลายเป็น ide หลักไปแล้ว
    ถ้ามีสองจอนะ โคตรสะดวกเลยครับ

  28. ทำไมของผมมันขึ้น cannot GET/ อ่ะครับ แก้ตรงใหนครับ

  29. ขอรวกวนหน่อยครับ มันเป็นแบบนี้อ่ะครับ
    [20:42:47] Using gulpfile /Applications/XAMPP/xamppfiles/htdocs/mytest/gulpfile.js
    [20:42:47] Starting 'sass'…
    Error! Missing the Sass executable. Please install and make available on your PATH.
    [20:42:47] Finished 'sass' after 13 ms

  30. [21:06:48] Using gulpfile /Applications/XAMPP/xamppfiles/htdocs/mytest/gulpfile.js
    [21:06:48] Starting 'sass'…
    [21:06:48] 'sass' errored after 4.12 ms
    [21:06:48] TypeError: Arguments to path.join must be strings
    at path.js:360:15
    at Array.filter (native)
    at Object.exports.join (path.js:358:36)
    at module.exports (/Applications/XAMPP/xamppfiles/htdocs/mytest/node_modules/gulp-ruby-sass/index.js:65:15)
    at Gulp.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/mytest/gulpfile.js:22:15)
    at module.exports (/Applications/XAMPP/xamppfiles/htdocs/mytest/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Applications/XAMPP/xamppfiles/htdocs/mytest/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Applications/XAMPP/xamppfiles/htdocs/mytest/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Applications/XAMPP/xamppfiles/htdocs/mytest/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20

  31. syntax ของ gulp เปลี่ยนใหม่แล้วอะครับ ลองแก้ตามนี้เลยครับ http://stackoverflow.com/questions/28140012/gulp-typeerror-arguments-to-path-join-must-be-strings

  32. —————————-

  33. Melody Mew says:

    ขอบคุณสำหรับบทความดีๆค่ะ

  34. ขอบคุณมากคับ ไม่รู้เลยว่า JS มันพัฒนามาไกลขนาดนี้แล้ว ผมทำงานเกี่ยวกับ Backend ใน java ไม่ค่อยได้แตะ ตกใจมาก JS มาไกลมาก

  35. ยอดเยี่ยม ชื่นชมครับ