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

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

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

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

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

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

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

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

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

javascriptfunction 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 กัน เสมือนว่าได้ดำเนินการบางอย่างกับมันแล้ว:

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

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

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

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