Gulp Fonksiyonlari

src

source (kaynak)ın kısaltılmışıdır. Kaynak dosyaları seçmemize yarar.

Örneğin css klasörünün içerisindeki tüm .css uzantılı dosyaların üzerinde işlem yapmak istiyorsak, şu şekilde seçebiliriz:

gulp.src("css/*.css")

Parametre olarak string yada array alır.

Tüm dosyalar yerine belirli dosyaları almak isterseniz dizi olarak dosyaları seçebilirsiniz:

gulp.src(["css/turkuaz.css", "css/style.css"])

dest

destination (hedef)ın kısaltılmışıdır. İşlenmiş dosyaları belirlenen konuma atar.

Örneğin src ile tüm css’leri seçip minift edip build klasörüne atalım:

gulp.src("css/*.css")
    .pipe(minify())
    .pipe(gulp.dest("build"));

task

task (görev) demektir. Gulp’a görev verme işlemlerini bu fonksiyonlar yardımı ile yapacağız.

Örnek kullanımı şu şekildedir:

gulp.task('görevİsmi', function() {
  // Kodlar
});

Her taska bir isim vermek zorundayız, task isimlerinde boşluk karakteri olmamalıdır.

watch

watch (izle) demektir. Gulp dosyalarını izler ve değişiklik olduğunda belirlediğiniz taskı çalıştırır.

Örnek kullanımı şu şekildedir:

gulp.task("watch", function() {
    gulp.watch("css/*.css", ["css"]);
    gulp.watch("js/*.js", ["javascript"]);
    
    //Gulp 4 kullananlar için
    gulp.watch("css/*.css", gulp.series("css"))
});

NOT

Gulp 4 kullanıyorsanız ikinci parametrede taskları array yerine gulp.series() fonksiyonuyla kullanmalısınız.

Yukarıdaki Gulp taskı, css klasörü içerisindeki tüm .css uzantılı dosyaları izler ve değişiklik yaptığınız anda css taskını çalıştırır.

Aynı şekilde .js uzantılı dosyalarda değişiklik yapıldığında javascript taskını çalıştırır.

default

default (varsayılan) demektir. Gulp’un varsayılan olarak temel görevi default taskıdır.

Örneğin css, js, img adında tasklar oluşturmuş olalım. gulp css, gulp javascript, gulp watch diyerek tek tek o taskları çalışmak yerine, default taskına hepsini eklersek tek kerede hepsini çağırabiliriz. Konsola gulp yazdığınızda varsayılan olarak gulp default taskı çalışacak ve bu taskta diğer tasklarınızı çalıştırmış olacaktır.

Örnek kullanımı şu şekildedir:

gulp.task('default', function() {
    //varsayılan tasklarımız
});

//yada şu şekilde kullanabilirsiniz:
gulp.task("default", ["css", "javascript", "watch"]);

//Gulp 4 kullananlar için
gulp.task("default", gulp.parallel("css", "javascript", "watch"))

NOT

Gulp 4 kullanıyorsanız ikinci parametrede taskları array yerine gulp.parallel() fonksiyonuyla kullanmalısınız.

Genel gulp bilgisi bu kadar. Bu aşamadan sonra en sık kullanılan eklentilerin anlatımına geçiş yapılacaktır.

Sıradaki Eklenti: Autoprefixer