คู่มือ Gulp สำหรับมือใหม่: เริ่มต้นง่ายๆ

ปัจจุบัน การใช้ build tool เป็นส่วนสำคัญของ workflow การพัฒนาเว็บ Gulp เป็นหนึ่งใน build tool ยอดนิยม (พร้อมกับ Webpack) แต่มี learning curve ที่ต้องผ่าน

อุปสรรคใหญ่คือ การเข้าใจส่วนประกอบมากมาย และการใช้ command line ที่อาจดูน่ากลัวหากไม่คุ้นเคย

บทช่วยสอนนี้จะพาคุณผ่านพื้นฐาน npm (Node Package Manager) และการตั้งค่า Gulp สำหรับโปรเจกต์ front-end จนคุณมั่นใจในการตั้งค่า workflow และใช้ command line ได้

Gulp ช่วยอะไรได้บ้าง?

Gulp ประหยัดเวลาอย่างมาก โดยให้คอมพิวเตอร์จัดการงานซ้ำซ้อน เช่น:

• คอมไพล์ Sass เป็น CSS
• รวม (concatenate) ไฟล์ JavaScript หลายไฟล์
• บีบอัด (minify) CSS และ JS
• รันงานอัตโนมัติเมื่อตรวจพบการเปลี่ยนแปลงไฟล์

ภาพรวมขั้นตอน

1. ติดตั้ง Node.js และ npm
2. ติดตั้ง Gulp และแพ็กเกจที่จำเป็น
3. ตั้งค่า gulpfile.js ให้รันงานที่ต้องการ
4. ปล่อยให้คอมพิวเตอร์ทำงานแทนคุณ!

ตั้งค่า Environment

Node.js

ต้องติดตั้ง Node.js ก่อน — เป็น JavaScript runtime (back-end JS) Gulp ทำงานบน Node ติดตั้ง Node แล้ว npm จะมาตามไปด้วย

Npm (Node Package Manager)

Npm เป็นคลังแพ็กเกจ JavaScript ที่อัปเดตตลอดเวลา Gulp เป็นหนึ่งในแพ็กเกจเหล่านี้ ความสะดวกคือติดตั้งผ่าน command line ได้เลย ไม่ต้องโหลดไฟล์มาติดตั้งเอง

คำสั่งพื้นฐาน: npm install [Package Name]

โฟลเดอร์ node_modules

ตอนติดตั้งแพ็กเกจ npm จะสร้างโฟลเดอร์ node_modules เก็บไฟล์ทั้งหมด ภายในมี nested folders มากมาย เพราะแพ็กเกจมักพึ่งพาแพ็กเกจอื่น (dependencies) ทำให้เกิดโฟลเดอร์ซ้อนกันหลายชั้น — ไม่ต้องกังวล แค่เข้าใจว่าเป็นอย่างนั้น

จัดการแพ็กเกจด้วย package.json

Npm ใช้ package.json บันทึกแพ็กเกจและเวอร์ชันที่ติดตั้ง รวมถึงข้อมูลโปรเจกต์ (ชื่อ, ผู้เขียน, Git repo) ทำให้ติดตั้งซ้ำหรือแบ่งปันกับนักพัฒนาคนอื่นง่ายขึ้น

สร้าง package.json

รันคำสั่งในโฟลเดอร์โปรเจกต์: npm init ตอบคำถามต่างๆ (กด Enter ใช้ค่า default ได้) จะได้ไฟล์ package.json

ติดตั้งแพ็กเกจและบันทึกลง package.json

รัน npm install [Package Name] จะติดตั้งและบันทึกลง dependencies อัตโนมัติ

ติดตั้ง Gulp: npm install gulp

แพ็กเกจเพิ่มเติมสำหรับงาน front-end:

• gulp-sass — คอมไพล์ Sass เป็น CSS
• gulp-cssnano — บีบอัด CSS
• gulp-concat — รวมไฟล์ JS
• gulp-uglify — บีบอัด JS

ติดตั้งทีละตัว: npm install gulp-sass npm install gulp-cssnano npm install gulp-concat npm install gulp-uglify

Gulp-cli แทน Global Gulp

แนะนำติดตั้ง npm install --global gulp-cli แทน Gulp global เพื่อรันคำสั่ง gulp ได้ แต่ใช้ Gulp version ต่างกันในโปรเจกต์ต่างๆ ได้

โครงสร้างไฟล์โปรเจกต์

โครงสร้างพื้นฐาน:

• Root Project Folder
  • index.html
  • gulpfile.js
  • package.json
  • node_modules (โฟลเดอร์)
  • app (โฟลเดอร์) — ไฟล์ต้นทาง: script.js, style.scss
  • dist (โฟลเดอร์) — ไฟล์ที่คอมไพล์แล้ว (อย่าแก้ไขตรงนี้)

ไฟล์ใน dist คือที่จะนำไปใช้ใน index.html จริง

สร้างและตั้งค่า Gulpfile

Gulpfile ทำ 2 อย่างหลัก: 1) โหลดแพ็กเกจเป็น Node modules 2) สร้างและรัน Gulp tasks

โหลดแพ็กเกจ

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

สร้าง Gulp Tasks

รูปแบบ: gulp.task('[Function Name]', function(){ ... }) เรียกใช้ด้วย gulp [Function Name]

ฟังก์ชันหลัก: .task() .src() .pipe() .dest() .watch()

Sass Task

gulp.task('sass', function(){
  return gulp.src('app/style.scss')
    .pipe(sass())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

ทดสอบ: gulp sass ควรเห็นข้อความ Finished และได้ไฟล์ dist/css/style.css ที่ minified แล้ว

JS Task

gulp.task('js', function(){
  return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

ใช้ array ใน src() เพื่อควบคุมลำดับโหลด (โหลด plugins ก่อน) ทดสอบ: gulp js

Watch Task

gulp.task('watch', function(){
  gulp.watch('app/*.scss', ['sass']);
  gulp.watch('app/js/**/*.js', ['js']);
});

ใช้ glob pattern ** เพื่อตรวจจับไฟล์ JS ในทุก subfolder

Default Task

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

รันแค่ gulp จะรัน sass, js แล้ว watch ต่อไป

อ้างอิงไฟล์ใน index.html

<link rel="stylesheet" href="dist/style.css">
<script src="dist/all.js"></script>

ปิดท้าย

ขอแสดงความยินดี! หวังว่าคู่มือพื้นฐานนี้จะช่วยให้คุณเริ่มใช้ Gulp ได้ โปรเจกต์จริงมักมี tasks เพิ่มเติมมากกว่านี้ — สนใจหัวข้อขั้นสูงแจ้งได้เลย!