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

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

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

terminalnpm install gulp-concat --save-dev 

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

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

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

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

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

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

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

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