บล็อกใหม่ - แชร์ความรู้ บทความ ข้อมูลข่าวสาร Web Dev และ Tech/IT ต่างๆ

Gulp.js คืออะไร + มีประโยชน์อย่างไร + พร้อมวิธีใช้งาน

Published on
Web Development
2015/04/getting-started-with-gulp
Discord

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

ก่อนเขียนบนความนี้ผมลองค้นหาดูแล้ว และพบว่าหลายๆบทความที่เป็นภาษาไทย เขียนไว้ค่อนข้างดี ใครสนใจก็อ่านเพิ่มเติมได้ครับ

ส่วนบทความภาษาอังกฤษ คือส่วนที่ผมใช้อ้างอิงครับ ดูได้ที่ References

Gulp.js คืออะไร ?

Gulp เป็น Steaming Build System ที่ช่วยให้ทำงานแทนเรา เช่น สั่ง start server ให้อัตโนมัติ , refresh หน้าเว็บเพจทุกครั้งที่มีการเปลี่ยนแปลงไฟล์, minify javascript หรือแปลง sass/less เป็น css เป็นต้น ลองคิดว่าเราต้องมาทำงานพวกนี้เอง งานเดิมๆ ซ้ำๆ คงจะเสียเวลาน่าดู นั่นแหละจึงเป็นที่มาของ Gulp

Gulp.js vs Grunt.js

ต้องมีหลายๆคนได้ยิน Gulp.js หรือ Grunt.js มาบ้าง และก็ต้องมีคนสงสัยว่า ทั้งสองต่างกันอย่างไร? จริงๆแล้ว ทั้ง Gulp.js และ Grunt.js ทำหน้าที่เดียวกันเลย คือช่วยทำงานแทนเรา แต่ว่า Grunt.js เกิดมาก่อน มี Plugins มากกว่า Community เยอะกว่า และใช้เวลา config ยากกว่า Gulp

ในขณะที่ Gulp ใช้การตั้งค่าที่ง่าย แม้ Plugin จะน้อยกว่า แต่ Plugin ส่วนใหญ่ก็มีเกือบหมดแล้ว เราคงไม่ใช้ Plugin เป็นพันๆ ในโปรเจ็คเดียวหรอก จริงไหม :) สำหรับ Plugin ของ Gulp ทั้งหมด ดูได้ที่นี่ Gulp.js Plugin

Step 1 : เริ่มต้นใช้งาน Gulp.js

ก่อนใช้งาน Gulp.js ต้องให้แน่ใจก่อนว่าติดตั้ง Node.js เรียบร้อยแล้ว เพราะว่าทุกการติดตั้งและใช้งาน จะต้องมี Node.js และ npm

ติดตั้ง gulp แบบ global

npm install gulp -g

Step 2 : Create new Project

ทดลองสร้างโปรเจ็คขึ้นมา 1 โปรเจ็ค ข้างในประกอบไปด้วยไฟล์ main.css, package.json 2 ไฟล์

mkdir gulp-example
cd gulp-example
touch main.css package.json

ไฟล์ main.css

body {
  margin-top: 80px;
  font-family: 'Varela Round', sans-serif;
}

.container {
  position: relative;
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f6f6f6;
}

.container .title {
  text-align: center;
  color: #242424;
  font-weight: $font-weight-bold;
}

.container p {
  color: #666060;
}

ไฟล์ package.json ตั้งชื่อโปรเจ็คและเวอร์ชั่น

{
	"name": "gulp-example",
	"version": "1.0.0"
}

จากนั้นทำการติดตั้ง gulp แบบ local ภายในโปรเจ็คของเรา

npm install gulp --save-dev

Step 3 : Create gulpfile.js

ทำการสร้าง gulpfile.js ขึ้นมา ไฟล์นี้จะเอาไว้กำหนดสิ่งที่เราจะให้ gulp มันทำงานแทนเรา ต่อไปจะขอเรียกว่า Task โดยไฟล์ gulpfile.js จะมีโค๊ดประมาณนี้

var gulp = require('gulp')

gulp.task('sayHello', function () {
  console.log('Hello World')
})
  • โค๊ดด้านบน เป็นการกำหนด Task ชื่อ sayHello และกำหนดให้ Task นี้จะทำอะไร ในที่นี้คือ console.log('Hello World'); เท่านั้น

ทดสอบ รัน gulp ด้วย command line (วิธีคือ พิมพ์ gulp TASKNAME)

gulp sayHello

จะได้ผลลัพธ์ประมาณนี้

[12:19:12] Using gulpfile ~/Playground/gulp-example/gulpfile.js
[12:19:12] Starting 'sayHello'...
Hello World
[12:19:12] Finished 'sayHello' after 114 μs

Step4 : Add First Gulp Plugin

ลองใช้ Plugin แรกกันเลยครับ Task นี้จะเป็นการ minify css โดยใช้ Plugin gulp-minify-css

npm install gulp-minify-css --save-dev

จากนั้น เพิ่มโค๊ดในไฟล์ gulpfile.js ดังนี้ (เป็น Task สำหรับ minify css 1 Task)

var gulp = require('gulp')

// Import gulp-minify-css เพื่อใช้งาน
var minifyCSS = require('gulp-minify-css')

gulp.task('css', function () {
  return gulp
    .src('main.css') // ไฟล์ที่ต้องการ minify
    .pipe(minifyCSS()) // สั่ง execute minifyCSS
    .pipe(gulp.dest('assets')) // dest : คือโฟลเดอร์ที่ต้องการเซฟ
})

ทดสอบ รัน Task gulp css สังเกตว่าเราจะได้โฟลเดอร์ assets และมีไฟล์ main.css ถูก minify แล้วแบบนี้

body {
  margin-top: 80px;
  font-family: 'Varela Round', sans-serif;
}
.container {
  position: relative;
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f6f6f6;
}
.container .title {
  text-align: center;
  color: #242424;
  font-weight: 700;
}
.container p {
  color: #666060;
}

Step 5 : gulp-rename

Task ที่สองคือ gulp-rename จะเอาไว้เปลี่ยนชื่อไฟล์ เช่น Task ด้านบน เราทำการ minify css แล้วแต่ชื่อมันเหมือนเดิมเลย

npm install gulp-rename --save-dev

เราจะเปลี่ยนให้มันเป็น main.min.css ดังนี้

var gulp = require('gulp')

// Import all gulp plugins
var minifyCSS = require('gulp-minify-css')
var rename = require('gulp-rename')

gulp.task('css', function () {
  return gulp
    .src('main.css') // ไฟล์ที่ต้องการ minify
    .pipe(minifyCSS()) // สั่ง execute minifyCSS
    .pipe(rename({ suffix: '.min' })) // หลังจาก minify ก็เพิ่ม .min ต่อท้ายชื่อไฟล์
    .pipe(gulp.dest('assets')) // dest : คือโฟลเดอร์ที่ต้องการเซฟ
})

สั่งรัน gulp css อีกรอบ จะเห็นไฟล์ main.min.css

Step 6 : gulp-uglify

Task นี้จะเป็นการ minify javascript ด้วย gulp-uglify การทำงานเหมือนกับ gulp-minify-css เลย ต่างกันแค่อันนี้จะ minify javascript

npm install gulp-uglify --save-dev

ต่อมา เพิ่มไฟล์ main.js เข้ามาในโปรเจ็ค เพื่อทดสอบการทำงาน

'use strict'

;(function () {
  console.log('Hello World')

  var date = new Date()
  var D = date.getDate()
  var M = date.getMonth()
  var Y = date.getFullYear()
  var h = date.getHours()
  var m = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()

  var stringDate = D + '/' + M + '/' + Y + ' ' + h + ' : ' + m

  document.getElementById('main').innerHTML +=
    '<p class="text-right">Created At : ' + stringDate + '</p>'
})()

เพิ่ม Task gulp-uglify ในไฟล์ gulpfile.js

var uglify = require('gulp-uglify')

gulp.task('js', function () {
  return gulp
    .src('main.js') // ไฟล์ที่ต้องการ uglify()
    .pipe(uglify()) // สั่ง execute uglify()
    .pipe(rename({ suffix: '.min' })) // เพิ่ม .min ต่อท้ายไฟล์
    .pipe(gulp.dest('assets')) // โฟลเดอร์ที่ต้องการเซฟ
})

ทดสอบรัน gulp js แล้วดูผลลัพธ์ที่โฟลเดอร์ assets จะได้ไฟล์ main.min.js

'use strict'
!(function () {
  console.log('Hello World')
  var e = new Date(),
    t = e.getDate(),
    n = e.getMonth(),
    g = e.getFullYear(),
    l = e.getHours(),
    o = e.getMinutes() > 9 ? e.getMinutes() : '0' + e.getMinutes(),
    s = t + '/' + n + '/' + g + ' ' + l + ' : ' + o
  document.getElementById('main').innerHTML +=
    '<p class="text-right">Created At : ' + s + '</p>'
})()
  • gulp.src() : เราสามารถใช้ _ หรือ array กรณีที่มีไฟล์ .js หรือ .css หลายๆไฟล์ โดยใช้ _.js,\*.css หรือจะใช้เป็น array ก็เช่น
gulp
  .src(['js/*.js'], ['css/*.cs'])

Step 7 : Watch the Tasks

ต่อมารู้จักกับ gulp watch กันดีกว่า เนื่องจาก ก่อนหน้านี้ เราใช้วิธีพิมพ์คำสั่งเพื่อรัน gulp บน command line แล้วมันต่างอะไรกับการไม่ใช้ gulp กันละ ? คำตอบคือ เราสามารถใช้ watch เพื่อเฝ้าดูการเปลี่ยนแปลงไฟล์ หากไฟล์มีการเปลี่ยนแปลงเมื่อไหร่ ก็สั่งให้มันรัน task ที่เรากำหนดไว้เลย ทีนี้เราก็ไม่ต้องมาพิมพ์คำสั่งทุกๆครั้งแล้ว เช่น ทุกครั้งที่แก้ไขไฟล์ css หรือ js ก็ให้มัน minify และ uglify ให้อัตโนมัติเลย ทีนี้ชีวิตสบายขึ้นละ :)

เพิ่ม Task ใหม่ในไฟล์ gulpfile.js

gulp.task('watch', function() {
	gulp.watch('main.css', ['css']);
	gulp.watch('main.js', ['js']);
});
  • วิธีการทำงานคือ เราใช้ gulp.watch() : เพื่อดูไฟล์ main.css หากมีการเปลี่ยนแปลงไฟล์ มันก็จะไปรัน Task ชื่อ css เช่นเดียวกันกับ main.js หากมีการเปลี่ยนแปลงไฟล์ มันก็จะไปรัน Task ชื่อ js

ทดสอบรัน Task watch gulp watch แล้วลองแก้ไขไฟล์ เพิ่ม/ลบ ข้อมูล แล้วสังเกตไฟล์ผลลัพธ์ใน assets ดูครับ

[13:47:48] Starting 'watch'...
[13:47:48] Finished 'watch' after 9.44 ms
[13:48:03] Starting 'js'...
[13:48:03] Finished 'js' after 35 ms
[13:48:20] Starting 'js'...
[13:48:20] Finished 'js' after 33 ms

Task watch จะถูกรันไว้จนกว่า เราจะกดยกเลิก Ctrl + c ต่างจาก Task อื่นที่เมื่อรันเสร็จ ก็จะจบการทำงานทันที

Step 8 : Default Task

สุดท้ายแล้ว เราสามารถที่จะกำหนด Default Task ก็ได้ เป้าหมายคือการรวมหลายๆ Task เข้าด้วยกัน และรัน Task ด้วยคำสั่งแค่ gulp หากเรามี Task เป็นจำนวนมาก การสั่งรันทุกๆ Task คงไม่สนุกแน่นอน

gulp.task('default', ['watch']);
gulp.task('all', ['css', 'js', 'watch']);

ต่อไป เวลาสั่งรัน Task ก็แค่พิมพ์ gulp มันก็จะรัน default task ให้ และเช่นกัน หากเราสั่ง gulp all ก็จะรัน Tasks 3 Tasks

สรุป

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

  • gulp-concat
  • gulp-connect
  • browser-sync

ลองไปศึกษาเพิ่มเติม และประยุกต์ใช้งานกันดูนะครับ :) สุดท้าย File ทั้งหมดที่ใช้ในบทความนี้ด้านล่างครับ

Source Code

References

Buy Me A Coffee
Authors
Discord