Gulp'da Dosyalarla Çalışma

Gulp, bir grup dosyayı almanıza, bu grup üzerinde bir işlem gerçekleştirmenize ve ardından değiştirilmiş dosyaları yeni bir adrese yerleştirmenize olanak tanır.

Bunun için özel fonksiyonlar src ve dest tasarlanmıştır. Haydi başlangıç olarak bunları kütüphanemizden içe aktaralım:

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

src fonksiyonu, belirtilen dosyayı almayı sağlar:

javascriptfunction task(cb) {
  return src('src/styles.css'); // cb çağrısı yerine return
}

Bu dosya ile daha sonra zincirleme olarak pipe fonksiyonu yardımıyla çeşitli işlemler gerçekleştirilebilir. Şematik olarak bu aşağıdaki gibi görünür:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(işlem1)
    .pipe(işlem2)
    .pipe(işlem3)
}

Zincirdeki son pipe çağrısı, yapılan işlemlerin sonucunun gönderileceği klasörü belirleyen dest fonksiyonu ile biter:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(işlem1)
    .pipe(işlem2)
    .pipe(işlem3)
    .pipe(dest('dist')); // dist klasörüne gönder
}

Her işlem, dosyamız üzerinde bir manipülasyon yapar. Örneğin, önce LESS'i CSS'e dönüştürebilir, sonra CSS özelliklerine ön ekler ekleyebilir, ardından elde edilen CSS'i minimize edebilir ve benzeri işlemler yapılabilir.

Her işlem için Gulp'a özel bir npm eklentisi (plugin) mevcuttur. Eklentiler kurulmalı ve dosyamıza bağlanmalıdır. Çeşitli eklentileri incelemeye sonraki derslerde başlayacağız.

Şimlik ısınmak için dosyamızı alalım ve üzerinde bazı işlemler yapmış gibi dist klasörüne bir kopyasını gönderelim:

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

Dosya Yolları Dizisi

src fonksiyonu, parametre olarak tek bir dosya yerine, bir dizi içinde birden fazla dosyayı aynı anda alabilir:

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