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

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

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

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

terminalnpm install del --save-dev

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

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

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

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

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

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

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

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

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

javascriptexports.default = series(taskDel, taskCss);

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

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

exports.default = series(taskDel, taskCss);