การทำงานกับไฟล์ใน Gulp

Gulp ช่วยให้สามารถนำกลุ่มไฟล์มา ทำการดำเนินการบางอย่างกับกลุ่มนั้น จากนั้นวางไฟล์ที่ถูกเปลี่ยนแปลงไว้ในตำแหน่งใหม่

สำหรับจุดประสงค์นี้มีฟังก์ชันพิเศษคือ src และ dest มาเริ่มต้นโดยนำเข้าพวกมันจากไลบรารีของเรากันก่อน:

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

ฟังก์ชัน src ช่วยให้ได้รับไฟล์ที่ระบุ:

function task(cb) {
	return src('src/styles.css'); // ใช้ return แทนการเรียก cb
}

จากนั้นกับไฟล์นี้ สามารถดำเนินการต่างๆ ตามลำดับได้โดยใช้ฟังก์ชัน pipe แผนภาพจะดูเหมือนดังนี้:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
}

การเรียก pipe สุดท้ายในลำดับจะสิ้นสุดด้วยฟังก์ชัน dest ซึ่งกำหนดโฟลเดอร์ที่จะส่งผลลัพธ์ของการดำเนินการที่ทำไป:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
		.pipe(dest('dist')); // ส่งไปยังโฟลเดอร์ dist
}

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

แต่ละการดำเนินการจะมีปลั๊กอิน npm สำหรับ Gulp ของตัวเอง จำเป็นต้องติดตั้งปลั๊กอินและเชื่อมต่อกับไฟล์ของเรา เราจะศึกษาเกี่ยวกับปลั๊กอินต่างๆ ในบทเรียนต่อๆ ไป

สำหรับตอนนี้เพื่อเป็นการวอร์มอัพ มาเอาไฟล์ของเราและส่งสำเนาไปยังโฟลเดอร์ dist กัน เสมือนว่าได้ดำเนินการบางอย่างกับมันแล้ว:

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

สร้างไฟล์ CSS ขึ้นสามไฟล์ สร้างทาสก์สาธารณะสามทาสก์ ให้แต่ละทาสก์สร้างสำเนาของไฟล์หนึ่งในไฟล์ของเราไปยังโฟลเดอร์ที่กำหนด

อาร์เรย์ของพาธไปยังไฟล์

ฟังก์ชัน src สามารถรับพารามิเตอร์เป็นไฟล์เดียวหรือหลายไฟล์พร้อมกันในรูปแบบของอาร์เรย์ได้:

function task(cb) {
	let files = [
		'src/styles1.css',
		'src/styles2.css'
	];
	
	return src(files)
		.pipe(dest('dist'));
}

สร้างไฟล์ CSS ขึ้นสามไฟล์ สร้างทาสก์ที่ทำสำเนาไฟล์ของเราไปยังโฟลเดอร์ที่ระบุ