การล้างโฟลเดอร์ก่อนบันทึกใน Gulp

คุณคงสังเกตเห็นแล้วว่าเมื่อบันทึกไฟล์ลงในโฟลเดอร์ Gulp จะไม่ลบไฟล์เก่าออกจากโฟลเดอร์นั้น

เพื่อให้สิ่งนี้เกิดขึ้น เราต้องติดตั้งปลั๊กอินพิเศษ del

ติดตั้งโดยใช้คำสั่งต่อไปนี้:

npm install del --save-dev

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

ตัวอย่างเช่น เลือกให้งานที่มีประโยชน์คือการบีบอัด CSS

มาเชื่อมต่อทั้งหมดที่จำเป็นกัน:

let {src, dest, series} = require('gulp');
let cleanCSS = require('gulp-clean-css');
let del = require('del');

มาสร้างงานสำหรับล้างโฟลเดอร์ dist:

function taskDel(cb) {
	return del('dist/*');
}

มาสร้างงานสำหรับบีบอัด CSS:

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

มาทำงานเป็นชุด:

exports.default = series(taskDel, taskCss);

รวมทั้งหมดเข้าด้วยกันแล้วจะได้โค้ดต่อไปนี้:

function taskDel(cb) {
	return del('dist/*');
}
function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

exports.default = series(taskDel, taskCss);

สร้างงานสำหรับบีบอัด JavaScript ล้างโฟลเดอร์ก่อนรันงานทุกครั้ง

สร้างกลุ่มงานจากสามงาน: งานสำหรับล้างโฟลเดอร์ งานสำหรับบีบอัด CSS และงานสำหรับบีบอัด JavaScript กำหนดว่างานใดควรทำงานตามลำดับ และงานใดควรทำงานแบบคู่ขนาน