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

ทำไมถึงต้องใช้

Task runner นี้จริงๆแล้วไม่ต้องมีก็ได้เพราะเราสามารถทำเองด้วยมือได้หมด แต่ว่าหลังจากที่ผมได้ลองใช้ Jekyll ผมก็พบว่า Task runner ของ Jekyll นั้นมันสะดวกมาก ผมสามารถเขียนโค้ดเป็น sass และ coffee หลังจากนั้น Jekyll จะจัดการแปลงให้ไปอยู่ในรูปแบบที่ใช้ได้เองอัตโนมัติ โดยที่ผมไม่ต้องไปสั่งรันเองเลย

ลองเล่นครั้งแรก

ในการลองเล่น Gulp.js ครั้งแรกของผม ผมได้ลอง 2 อย่างคือ แปลง sass เป็น css อัตโนมัติ และบีบอัดรูปอัตโนมัติ

ติดตั้ง

ขั้นแรกติดตั้งลงเครื่องโดยใช้คำสั่ง

npm install -g gulp

จากนั้นติดตั้งส่วนเสริมที่ผมจะใช้งานคือ แปลง sass กับบีบอัดรูปลงเครื่องด้วยคำสั่ง

npm install --save-dev gulp gulp-sass gulp-image-optimization

จากนั้นผมก็สร้างไฟล์ gulpfile.js ขึ้นมาเพราะ Gulp.js จะเรียกคำสั่งจากไฟล์นี้ โดยในไฟล์นี้ผมได้เขียนคำสั่งแปลง sass เป็น css และบีบอัดรูปดังนี้

var gulp = require("gulp")
var sass = require("gulp-sass")
var imageOptimize = require("gulp-image-optimization");

gulp.task('sass', function () {
  gulp.src('./_sass/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./_site'));
});

gulp.task('imageOptimize',function(cb){
  gulp.src(['_image/**/*.png','_image/**/*.jpg','_image/**/*.gif','_image/**/*.jpeg']).pipe(imageOptimize({
      optimizationLevel: 5,
      progressive: true,
      interlaced: true
  })).pipe(gulp.dest('./_site/images')).on('end', cb).on('error', cb);
})

gulp.task('default',['sass','imageOptimize'],function(){
  gulp.watch('./_sass/**/*.scss', ['sass']);
  gulp.watch(['_image/**/*.png','_image/**/*.jpg','_image/**/*.gif','_image/**/*.jpeg'],['imageOptimize']);
});

จากโค้ดด้านบนอธิบายได้ว่า ผมสร้างมา 3 task คือ default imageOptimize และ sass ซึ่ง default จะถูกเรียกขึ้นมาเมื่อรันคำสั่ง

gulp

แล้วตัว default จะไปเรียก sass และ imageOptimize ให้มากทำงานของมัน ซึ่งเมื่อผมลองเล่นแล้วแม้ว่าจะงงๆนิดหน่อยแต่มันก็ทำงานได้ดีเลยละ

ปัญหาที่พบ

สำหรับแปลง sass

ตัว Gulp.js มีปัญหามองไม่เห็นไฟล์ที่ขึ้นต้นด้วย _ ดังนั้นไม่สามารถแปลงไฟล์บางไฟล์ที่ดาวน์โหลดมาแล้วขึ้นต้นด้วย _ ได้ เช่น bootstrap เมื่อโหลดเป็น sass มาแล้วไฟล์จะเป็น _bootstrap.scss ซึ่ง Gulp.js จะมองไม่เห็นเราจึงต้องสร้างไฟล์ใหม่มาไว้ในโฟลเดอร์เดียวกันสมมุติว่าชื่อ main.scss โดยด้านในเขียนโค้ดว่า

@import "bootstrap";

แล้วไฟล์ผลลัพธ์ที่ได้จาก Gulp.js ก็จะถูกดึง bootstrap เข้ามาใช้งานแล้ว

สำหรับการแปลงรูปภาพ

จากที่ได้ใช้ Task runner ของ Jekyll ของ Jekyll นั้นจะอัพเดตทันทีเมื่อสร้างไฟล์ใหม่ขึ้นมา แต่ของ Gulp.js นั้นผมก็ไม่รู้ว่าผมเขียนผิดพลาดประการใด เมื่อเพิ่มไฟล์ใหม่เข้าไปแล้ว Gulp.js ไม่ยอมรันทั้งๆที่เปิด ให้ watch อยู่ แต่ว่าถ้าเป็นการอัปเดตไฟล์เดิมก็ทำงานให้ปกติ

สรุป

เลือกใช้ Gulp ไหม?

คำตอบในใจตอนนี้ของผมคือ ไม่ ครับ เพราะว่าผมอาจจะยังศึกษาไม่ดีพอ ทำให้มันยังไม่สามารถรู้ได้ว่ามีไฟล์ใหม่เข้ามา ถ้าผมศึกษาจนทำแบบนั้นได้เมื่อไรผมย้ายมาใช้แน่นอนครับ