Getting Started with Gulp.js

ถ้าใครที่เขียนเว็บในสมัยนี้ เราจะพบว่ากว่าเราจะเขียนเว็บออกมาได้สักเว็บหนึ่ง เราต้องเขียนทั้ง HTML, CSS และ JS หรือในบางคนอาจจะเขียน SCSS ไม่ก็ SASS ก็ต้องมา Compile และ Minify อีก ซึ่งเป็นอะไรที่ค่อนข้างเสียเวลามาก ๆ จะดีกว่ามั้ยที่จะมี Tool สักตัวมาจัดการให้เราเองทั้งหมด มาทำความรู้จักกับ Gulp.js กัน

Gulp.js คืออะไร ?

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

ติดตั้ง Gulp.js

ตัว Gulp เองเป็น Package ตัวนึงของ Node.js ฉะนั้นเราสามารถติดตั้งผ่าน npm ได้โดยตรงเลย โดยการพิมพ์คำสั่งตามด้านล่างเลย

sudo npm install -g gulp

เพียงเท่านี้ เราก็ติดตั้ง คนใช้ ของเราเป็นที่เรียบร้อยแล้ว เราสามารถเรียกผ่านคำสั่ง gulp ได้จากที่ไหนของเครื่องก็ได้แล้ว

รู้จักกับ gulpfile.js

gulpfile.js เป็นที่ที่เราเขียนคำสั่งหรือเรียกว่า Task ของ Gulp เราสามารถกำหนดได้หมดว่าเราต้องการให้มันทำอะไรบ้าง
เริ่มต้นง่าย ๆ ให้เราสร้างไฟล์ชื่อ gulpfile.js ขึ้นมาใน root directory ของ Project เรา และให้พิมพ์ตามด้านล่างเลย

var gulp = require('gulp');

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

//do something here

});

จากนั้นให้เราเข้าไปที่ Console โดยให้ Directory ชี้ไปที่ Project ของเราและพิมพ์คำสั่ง gulp ลงไปจะเห็นว่ามันขึ้นเหมือนข้างล่างนี้

[23:30:00] Using gulpfile ~/Desktop/testProj/gulpfile.js
[23:30:00] Starting 'default'...
[23:30:00] Finished 'default' after 72 μs

พอเราลองมาดู "อ้าว ! ไม่เห็นมีอะไรเลย !!" งั้นลองกลับไปดู gulpfile.js ที่เราเขียนไว้เมื่อกี้กัน
ในบรรทัดแรก var gulp = require('gulp'); มันคือการ Import Gulp เข้ามาในไฟล์
จากนั้นเราก็เรียกคำสั่ง gulp.task ที่เป็นการสร้าง Task หรือ ชุดคำสั่งของสิ่งที่เราต้องการทำ โดย Argument ตัวแรกคือ ชื่อของ Task นั่นก็คือ default และตามด้วยสิ่งที่ต้องการให้มันทำเป็น function ลงมา ซึ่งในนั้นเราไม่ได้ใส่อะไรไว้เลย ไม่มีอะไรเกิดขึ้นนั่นเอง
Task ที่ชื่อว่า default เป็น Task พิเศษตัวนึงที่เวลา Gulp เข้ามามันจะเข้ามาหา Task นี้เป็น Task แรกเสมอ เหมือนกับ Main Function ในภาษา C อะไรทำนองนั้นเลย

ลองสร้าง Task ของตัวเอง

การสร้าง Task ก็เหมือนกับ งาน ใหญ่ ๆ งานหนึ่ง ซึ่งในงานเราจำเป็นที่ต้องกำหนดเสมอว่า งานนั้น ๆ ต้องทำอะไรบ้าง แต่เราไม่ต้องสนใจเลยว่า แต่ละอย่างที่ทำนั้น ทำอย่างไร เราให้ Plugin เป็นคนจัดการให้
เราสามารถสร้าง Task ของเราเองได้โดยการใช้คำสั่งตามด้านล่างเลย

gulp.task('mytask', function(){
    //do something here
});

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

gulp mytask

ถ้าเป็นชื่ออื่นก็แค่เปลี่ยนชื่อไปเท่านั้นเอง แต่มีคำถามใหม่ว่า "ถ้าเรามีหลาย Task แบบนี้เราก็ต้องพิมพ์หลายรอบสิ ?" คำตอบคือ ไม่ มันมีวิธีอยู่ ให้เรากลับไปที่ Default Task และลองแก้ Default Task เป็นตามนี้ดู

gulp.task('default', [mytask]);

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

ลองมา Compile ไฟล์ SASS กันดีกว่า

หลังจากที่เราเข้าใจเรื่องของ Task กันไปแล้ว ตอนนี้เราลองเอามาใช้จริง ๆ กันเลยดีกว่า กับ การทำสิ่งที่พื้นฐานมาก ๆ ที่เราต้องทำกันบ่อยมาก ๆ เวลาเราทำเว็บกันนั่นคือ การ Compile SASS
ตัว Gulp เองมันก็เป็นแค่ คนใช้โง่ ๆ คนหนึ่งมัน Compile SASS ไม่เป็นหรอก ฉะนั้นเราต้องสอนมันโดยการลง Plugin ซึ่ง Plugin ที่ใช้ Compile SASS มีชื่อว่า gulp-sass เราสามารถติดตั้ง Plugin ผ่าน npm ได้โดยตรงเลย โดยการพิมพ์

npm install gulp-sass

จากนั้นใน gulpfile.js เราต้อง import ตัว gulp-sass เข้ามาในไฟล์กันก่อน โดยการเติมคำสั่งนี้ลงใต้บรรทัดแรก

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

ตอนนี้เราสามารถเรียกใช้ gulp-sass ได้แล้ว โดยใช้คำสั่ง sass เราลองมาเขียน Task ที่ใช้ Compile SASS กันดีกว่า ให้เราสร้าง Task ตามด้านล่างนี้เลย

gulp.task('sass',function(){
    gulp.src('/sass/*.sass)
            .pipe(sass())
            .pipe(gulp.dest('/css');
});

ลองมาดู Task นี้กันสักหน่อย ก่อนอื่นเราสร้าง Task ที่ชื่อว่า sass ขึ้นมา และบอกต่อว่าใน Task นี้เราจะให้ใช้ไฟล์ชื่ออะไรก็ได้จาก Folder ที่ชื่อว่า sass โดยใช้คำสั่ง src() ที่อยู่ใน Package ของ Gulp
จากนั้นบรรทัดถัดไป เราบอกว่า ให้มันเอาไฟล์ sass จากบรรทัดเมื่อกี้มา compile และเก็บไว้ก่อน
และสุดท้าย เป็นการบอกว่า ให้เอาไฟล์ที่ถูก compile และพักไว้เมื่อสักครู่ ย้ายไปที่ Folder ที่ชื่อว่า CSS ผ่านคำสั่งที่ชื่อว่า dest() ที่อยู่ใน Package ของ Gulp ก็เป็นอันเสร็จ
อาจจะสงสัยว่า .pipe() คืออะไร ? อันนี้มันจะอยู่ใน Node.js มันคือการที่เอาไฟล์ไปพักไว้ใน Memory เฉย ๆ ไม่มีอะไร ยังไม่ต้องไปสนใจก็ได้
ถัดมาให้เราลองเขียน sass file ง่าย ๆ ขึ้นมาสักไฟล์นึง แล้วเซฟไว้ใน Folder ที่ชื่อว่า sass สุดท้ายเรามา Compile ได้โดยรันคำสั่งตามนี้บน Console

gulp sass

หลังจากที่รัน เราจะเห็นว่าใน Folder CSS จะมีไฟล์ ๆ นึงโผล่ขึ้นมา นั่นก็คือ CSS ที่ผ่านการ Compile แล้วนั่นเอง

ต่อไฟล์ SASS หลาย ๆ ไฟล์เข้าด้วยกัน

จากเมื่อกี้ที่เราสามารถสั่ง Compile SASS กันไปแล้ว แต่ถ้าเกิด SASS ที่เราเขียนมันไม่ได้มีไฟล์เดียว ถ้าเอาไปใช้ทั้งแบบน้ันก็ไม่ดีเลย ฉะนั้นเราจะต้องเอาที่เราเขียนทั้งหมดมาบีบให้เป็นไฟล์เดียวก่อน โดยการใช้ Plugin ที่ชื่อว่า gulp-concat ให้เราติดตั้งกันเลย

npm install gulp-concat

จากนั้นให้เรากลับมาดูที่ Task sass ที่เราเขียนไว้เมื่อครู่กัน ตอนนี้เราจะบอกให้ คนใช้ของเรา เอาไฟล์ Sass ที่อยู่ใน Folder ที่ชื่อว่า sass ของเรามาต่อแล้ว แล้ว Compile เหมือนเมื่อกี้กัน หลังจากเติมเข้าไปแล้ว มันก็จะเป็นแบบนี้เลย

gulp.task('sass',function(){
    gulp.src('/sass/*.sass)
            .pipe(concat('style.sass')
            .pipe(sass())
            .pipe(gulp.dest('/css');
});

และอย่าลืม Import gulp-concat ที่เราพึ่งติดตั้งเข้ามาด้วย

var concat = require('gulp-concat');

Minify CSS

หลังจากที่เราเอาไฟล์ SCSS มารวมกันและ Compile เป็นที่เรียบร้อยแล้ว เราก็ต้องเอามันมา Minify สักหน่อยเพื่อ Performace ที่ดีขึ้น และขนาดที่เล็กลง โดยใช้ Plugin ที่ชื่อว่า gulp-uglify ให้เราติดตั้งลงไป และ Import มันเข้ามาเลย ไม่ขอเขียนวิธีแล้วนะ น่าจะทำได้แล้ว
เราจะมาต่อเติม Task ชื่อ sass ที่เราพึ่งเขียนไปกัน เป็นแบบนี้เลย

gulp.task('sass',function(){
    gulp.src('/sass/*.sass)
            .pipe(concat('style.sass')
            .pipe(sass())
            .pipe(uglify())
            .pipe(gulp.dest('/css');
});

หลัก ๆ ของ Task นี้ก็เหมือนเดิม แต่เราเพิ่มการเรียก คำสั่งจาก uglify ที่เราพึ่งติดตั้งลงไปเมื่อครู่ให้มัน Minify SASS ที่พึ่งผ่านการ Compile จากคำสั่งบรรทัดก่อนหน้าเท่านั้นเอง

สร้าง Source Map

การทำ Source Map จริง ๆ มันก็ไม่ได้มีผลอะไรกับผู้ใช้ แต่มันมีผลกับเรา เวลาเรา Minify Stylesheet ของเราไปแล้ว เมื่อเรา Inspect ใน Chrome เราจะไม่รู้เลยว่า Style อันนี้มาจากบรรทัดไหน เพราะมันถูกย่นให้เหลือแค่บรรทัดเดียวไปแล้ว
เราสามารถทำ Source Map ได้ง่าย ๆ โดยการใช้ Plugin ที่ชื่อว่า gulp-sourcemaps มีตัว s ด้วยนะ อย่าลืม โดนมาแล้ว ให้เราติดตั้ง และเอามันเข้ามาใน gulpfile.js เลย และลองแก้ Task sass ตามนี้

gulp.task('sass',function(){
    gulp.src('/sass/*.sass)
            .pipe(concat('style.sass')
            .pipe(sass())
            .pipe(sourcemaps.init())
            .pipe(uglify())
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('/css');
});

ต้อง งง กันแน่ ๆ เพราะ Plugin ตัวนี้ค่อนข้างจะต่างจากคนอื่นนิดหน่อย เพราะเราต้องเรียกมันถึง 2 ครั้งเลยตั้งแต่ init() และ write()
เริ่มต้นที่ init() เป็นการบอกว่า ให้ตัว gulp-sourcemaps คอยดูนะว่า มีไฟล์อะไรเข้ามาใหม่ ให้มันสร้าง Source Map เอาไว้ และเก็บไว้ แบบนี้ไปเรื่อย ๆ
พอมาถึงที่ write() มันก็จะเอา Source Map ที่มันทำไว้ เอาไปแปะลงไฟล์จริง ๆ ออกมานั่นเอง

ให้ Gulp.js รัน Task ให้แบบอัตโนมัติ

ถึงตอนนี้ เราน่าจะได้ Concept อะไรไปกันบ้าง ทีนี้ เราลองมาดูเคสที่ถ้าเรามีทั้ง Stylesheet ที่ต้อง Compile และ JS ที่ต้อง Minify ถ้าเกิด หรืออื่น ๆ อีก เราใช้วิธีเดิมคือ การเรียกคำสั่งแบบปกติคงเหนื่อยแน่ ๆ

gulp sass
gulp js

หรือว่าใน Default Task เราจะเขียนเหมือนที่ผมบอกไปเมื่อตอนต้นดี ?

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

ก็ยังเหนื่อยอยู่ดี เพราะเราต้องสลับหน้าไปต่างไปเรียกมันอีก จะดีกว่ามั้ย ถ้า Gulp มันรู้ด้วยตัวเองว่า ไฟล์มันมีการเปลี่ยนแปลง แล้วให้มันจัดการ Task นั้น ๆ ให้เรา
ใช่ครับ เราสามารถทำได้ โดยผ่าน Method ตัวนึงของ Gulp ที่มีชื่อว่า watch() ลองมาดูตัวอย่างกัน

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

ทีนี้ให้เราลองเรียกคำสั่ง

gulp

แล้วลองแก้ไฟล์ sass อะไรก็ได้แล้วลองเซฟดู ถ้าเราสลับไปที่หน้่า Console จะเห็นว่า Task ที่ชื่อว่า sass จะถูกรันทันที เป็นอะไรที่สะดวกมาก ๆ

สรุป

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