Web Developer: กรกฎาคม 2014

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 ได้ โดยเราจะทำเพียงแค่ครั้งเดียวเท่านั้น (งานหน้าไม่ต้องติดตั้งแบบนี้แล้ว) ให้เราพิมพ์คำสั่งด้านล่างนี้

npm install -g gulp

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

sudo npm install -g gulp

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

1.2 Local

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

cd myProject

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

npm install --save-dev gulp

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

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

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

// โหลด package "gulp" มาใช้ (บรรทัดนี้ต้องใส่เสมอ)

var gulp = require('gulp');

// สร้าง task ชื่อว่า "taskName" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ

gulp.task('taskName', function() {

// ระบุว่า task นี้ทำอะไร

});

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

var gulp = require('gulp');

// สร้าง task ที่มีชื่อว่า "siamhtml"

gulp.task('siamhtml', function() {

// ให้แสดงข้อความ "SiamHTML" ออกมาทาง console

console.log('SiamHTML');

});

3. รัน gulp.js

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

gulp [ชื่อ task ที่จะสั่งให้ทำงาน]

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

gulp siamhtml

เมื่อลองรันดู เราก็จะเห็นข้อความ “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)

npm install --save-dev gulp-ruby-sass

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

// โหลด package "gulp" มาใช้ (บรรทัดนี้ต้องใส่เสมอ)

var gulp = require('gulp');

// โหลด package "gulp-ruby-sass" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)

var sass = require('gulp-ruby-sass');

// สร้าง task ชื่อว่า "sass" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ

gulp.task('sass', function () {

// ให้คอมไพล์ .scss ทุกไฟล์ที่อยู่ในโฟลเดอร์ scss

return gulp.src(['scss/**/*.scss'])

.pipe(sass({

compass: true, // ใช้ Compass

style: 'compressed', // เลือก output แบบ compressed

}))

.on('error', function (err) {

console.log(err.message);

})

.pipe(gulp.dest('css')) // เก็บไฟล์ css ไว้ที่โฟลเดอร์ css

});

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

gulp sass

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

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

// สร้าง default task ขึ้นมา พร้อมกับระบุ task อื่นๆ ที่อยากให้ทำพร้อมกับ default task

gulp.task('default', ['taskName1', 'taskName2', 'taskName3'], function() {

// ระบุว่า default task ทำอะไร (ไม่ต้องใส่ก็ได้ เพราะเราต้องการจะให้ทำ taskName1, taskName2, taskName3)

});

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

// เพิ่ม sass ให้ทำพร้อมกับ default task

gulp.task('default', ['sass'], function() {

// ระบุว่า default task ทำอะไร (เว้นไว้ก่อน)

});

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

gulp

หากลองดูที่ 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 แบบนี้

gulp.task('default', ['sass'], function() {

// เมื่อไฟล์ scss มีการเปลี่ยนแปลง ก็จะสั่งให้ task "sass" ทำงาน

gulp.watch("scss/**/*.scss", ['sass']);

});

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

gulp

สิ่งที่เกิดขึ้นก็คือ 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” เพิ่มเข้ามาอีกตัว

npm install browser-sync gulp --save-dev

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

// โหลด package "browser-sync" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)

var browserSync = require('browser-sync');

// สร้าง task ชื่อว่า "browser-sync" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ

gulp.task('browser-sync', function() {

browserSync({

server: {

baseDir: "./"

}

});

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

// เพิ่ม task "browser-sync" ให้ทำพร้อม default task

gulp.task('default', ['sass', 'browser-sync'], function() {

// เมื่อไฟล์ html หรือ css มีการเปลี่ยนแปลง ก็ให้รีเฟรช web browser

gulp.watch(['**/*.html'], browserSync.reload);

gulp.watch(['css/**/*.css'], browserSync.reload);

// เมื่อไฟล์ scss มีการเปลี่ยนแปลง ก็ให้ทำ task "sass"

gulp.watch("scss/**/*.scss", ['sass']);

});

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

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

gulp

เมื่อสั่งให้ 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 ต่างๆ มาประยุกต์ใช้ให้เหมาะกับงานได้มากน้อยแค่ไหน ?

หน้าเว็บ

CSS Filter Effects

Gulp.js คืออะไร ?