การรวมไฟล์ใน Gulp

เมื่อเขียนโค้ด CSS จะสะดวกกว่าถ้าแบ่งโค้ด ออกเป็นหลายไฟล์ อย่างไรก็ตาม ยิ่งมีไฟล์มากเท่าไหร่ หน้าเว็บไซต์ก็จะโหลดช้าลงเท่านั้น สรุปได้ว่า เมื่อเขียนโค้ดจะสะดวก ที่ทำงานในหลายไฟล์ แต่เมื่อนำไปเชื่อมต่อ กับ HTML ให้รวมไฟล์เหล่านี้ให้เป็นไฟล์เดียว

ในเรื่องนี้จะช่วยเราได้คือปลั๊กอินพิเศษ gulp-concat มาลองติดตั้งมันในโปรเจกต์ของเรากัน: ในโปรเจกต์ของเรา:

npm install gulp-concat --save-dev

หลังจากนั้น นำเข้า (import) ปลั๊กอินที่ติดตั้งแล้ว:

let {src, dest} = require('gulp');
let concat = require('gulp-concat');

ลองใช้มันในการรวมไฟล์ CSS หลายไฟล์ ให้เป็นไฟล์เดียว:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(dest('dist'));
}

รวมไฟล์ JavaScript หลายไฟล์ให้เป็นไฟล์เดียว

การดำเนินการกับไฟล์ที่รวมแล้ว

หลังจากรวมไฟล์แล้ว ต่อไปในสายพานลำเลียง (chain) จะ เคลื่อนที่ต่อไปเป็นไฟล์เดียวที่รวมแล้ว และเราสามารถ ดำเนินการต่างๆ กับมันได้

ตัวอย่างเช่น ลองทำการย่อขนาด (minify) CSS:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

รวมไฟล์ LESS หลายไฟล์ให้เป็นไฟล์เดียว จากนั้นแปลงไฟล์นี้เป็น CSS จากนั้น ทำการย่อขนาด (minify) CSS ที่ได้