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:

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

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

function 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:

function 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:

function 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:

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

Üç CSS dosyası oluşturun. Üç adet genel (public) görev oluşturun. Her bir görev, dosyalarımızdan birinin belirtilen bir klasörde kopyasını oluştursun.

Dosya Yolları Dizisi

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

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

Üç CSS dosyası oluşturun. Dosyalarımızın belirtilen klasörde bir kopyasını oluşturacak bir görev yapın.