Gulp.Js ง่ายๆ สไตล์คนขี้เกียจ
นานแล้วที่ไม่ได้มานั่งมีเวลามาเขียนบทความอะไรแบบนี้ เข้าเรื่องกันเลย ด้วยความที่งานที่ทำปัจจุบัน มันติดปัญหาหลายๆ อย่าง ในการ bundle พวกไฟล์ .js, .scss, .css หรือ .html (จากบทความเก่าๆ ผมค่อนข้างไปทาง Webpack.js + PugHtml / Handlebar.js)
การที่ทำงานต่อจากคนก่อนหน้า ซึ่งไม่ได้มีการ bundle ไฟล์ที่ผมกล่าวมาทั้งหมดเลย ก็ได้แต่นั่งหาวิธีจะลดงานให้คนในทีมยังไง เพื่อไม่ให้ต้องมานั่ง เขียนโค้ดแบบวิธีเดิมๆ อีกต่อไป
เริ่มเลยดีกว่า งานที่ผมทำมีส่วนชัดเจน 3 อันที่มองเห็น *.html, *.css, *.js ผมตัดสินใจเลือก Gulp.js ให้มาจัดการแปลงไฟล์ ทั้งหมดของผมเลย ด้วยสาเหตุต้องการ ลดรุปการเขียน css ไปใช้ scss แทนให้หมด ซึ่ง plugin ของ gulp ที่เราจะใช้ทั้งหมดมีดังนี้
gulp-concat : รวมไฟล์ .js ให้อยู่ในรูปแบบไฟล์เดียว
gulp-uglify : Minify JavaScript with UglifyJS3.
gulp-autoprefixer : Prefix CSS with Autoprefixer
gulp-cssnano : Minify CSS with cssnano.
gulp-concat-css : รวมไฟล์ .css ให้อยู่ในรูปแบบไฟล์เดียว
gulp-imagemin : Minify PNG, JPEG, GIF and SVG images with imagemingulp-sass : plugin สำหรับการเขียน Sass, Scss นั่นเอง
browser-sync : พูดง่ายๆ ตรงตัวเลยก็คล้าย live-reload นั้นเอง
อันดับแรกเริ่มสำหรับการขึ้นต้นโปรเจ็คใหม่ ให้ทำการเปิด Iterm / Terminal อย่างใดอย่างหนึ่งมาก่อน (สำหรับคนใช้ Mac) หรือ CMD
npm i gulp gulp-cli gulp-concat gulp-sass gulp-cssnano gulp-autoprefixer gulp-imagemin browser-sync gulp-sourcemaps gulp-uglify
จากนั้นก็ลองมาเขียน gulp.js โดยการสร้าง file ชื่อ gulpfile.js เป็นอันดับแรก
หรือลองดู Demo กรณีศึกษาใน https://github.com/tittee/gulp-basic
เป็นตัวอย่างก้ได้นะครับ
ปล. ผมถนัด Arrow Function นะครับ เป็นการลดรูปการเขียนโค้ด และสามารถ pass Props เข้ามาใช้ใน function เราได้ด้วย
