Gulp.js Nedir Ne İşe Yarar ?

Gulp.js Nedir ?

Gulp.js en basit tabiriyle javascript görev çalıştırıcısıdır.(javascript task runner).

Peki Görev Çalıştırıcısı Nedir ?

Görev çalıştırıcısı ise frontend projesi geliştirirken manuel yaptığımız işleri otomatikleştirmemize yarar. Yani örneğin typescript dosyalarını js’e scss dosyalarını css’e otomatik olarak derleyebiliriz. Tabiki yetenekleri sadece typescript vs scss değil resim optimize edebilir , css ve js dosyalarınızı tek bir dosyada toplayabilir hatta ftp bilgilerini girerek otomatik deploy bile yapabilirsiniz.Gulp ile ilgili bir çok eklenti bulunuyor dilerseniz kendi eklentinizide yazabilirsiniz.

Gulp ile bunu yapmak istediğimizde gulpfile.js adında bir dosya oluştururuz ve otomatikleştirmek istediğimiz her işlem için bir task yazarız. Daha sonra daha sonra tek yapmamız gereken komut satırından “gulp olusturduğumuz-task-adı” yazmak olur ve task içerisinde yazdığımız tüm işlemler gerçekleşir.

Bağımlılıklar

Npm paket yöneticisinin kurulu olması gerekmektedir.Npm kurulumu ve ne olduğu hakkında bilginiz yoksa aşağıdaki linkteki yazıyı inceleyebilirsiniz

http://derinkod.com/npm-ve-nodejs-kurulumu/

Gulp.js Kurulumu

Masaüstüne GulpTest isminde bir klasör oluşturalım ve bu klasör içerisinde komut satırını çalıştıralım

npm init

diyerek yeni bir npm projesi oluşturalım. Karşımıza proje ile ilgili bilgiler soracaktır herşeye enter diyerek geçelim. Daha sonra aşağıdaki kodu komut satırında çalıştırarak gulp kurulumunu yapalım

npm install gulp --save-dev

bu işlemi yaptıktan sonra klasör içerisinde oluşan package.json dosyasında devDependencies altında gulpın kurulu olduğunu görebiliriz.

Gulp.js İle İlk Taskmızı Yazalım

Typescript vs Scss kullanarak bir web sayfası geliştirdiğimizi düşünelim burada yapmak istediğimiz işlem typescript ve scss dosyalarını her düzenlediğimizde otomatik olarak bizim belirttiğimiz şekilde javascript ve css derlemelerini yaptırmak olacaktır .

Öncelikle kurulumda oluşturduğumuz GulpTest klasörüne girip GulpFile.js adında bir dosya oluşturalım. Daha sonra bu dosya içerisinde aşağıdaki kodu ekleyelim ve ilk taskımızı oluşturup çalıştığını test edelim

var gulp = require('gulp');

gulp.task('first-task',function(){
  console.log('İlk görev başarıyla oluşturuldu');
});

Kodumuzu ekledikten sonra GulpTest klasörü içerisinde komut satırını açıp

gulp first-task

yazdığımızda bize “ilk görev başarıyla oluşturuldu” metnini dönüyorsa ilk taskımızı başarıyla yazdık demektir.

Şimdi projemizde kullanmak istediğimiz Typescript ve Scss Paketlerini yükleyelim. Bunun için aşağıdaki kodları sırasıyla komut satırında çalıştıralım.

npm install -g typescript
npm install gulp-typescript --save-dev
npm install gulp-sass --save-dev

yukardaki paketleri yüklediğimizde package.json içerisinde devDependencies  altında typescript ve sass paketlerinin yüklendiğini göreceğiz. Daha sonra GulpFile.js  dosyasının en üstü kısmı aşağıdaki gibi olacak şekilde güncelleyelim.

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sass = require('gulp-sass');

 

Örnek için GulpTest klasörü içine test.ts ve test.scss dosyalarını oluşturalım

Şimdi GulpFile.js dosyasını açıp typescript ve scss için derleme taskımızı yazalım . Az önce oluşturduğumuz first-task ın altına scss ve typescript derleme tasklarımızı yazalım

gulp.task('sass', function () {
    return gulp.src('./*.scss') // ana klasörümüz içerisinde .scss dosyalarını
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css')); // ana klasör içerisinde css klasörü içerisinde çıkarı
});
gulp.task('typescript', function () {
    return gulp.src('./*.ts')
     .pipe(ts()) 
     .pipe(gulp.dest('./js'));	 
});

Yukarıdaki kod kısmında src kısmında derlenecek dosyaları belirtiyoruz *.scss demek tüm scss dosyaları demektir. pipe kısmında gulp.dest kısmında belirttiğimiz path ise derlenen dosyaların nereye çıkartılacağıdır.

Yani bu projede anasayfadaki scss dosyalarını css klasörü içine typescript dosyalarını ise js klösörü içerisine derlemesini söyledik. Şimdi test edelim aşağıdaki kodu komut satırına yazarak typescript dosyamızı derleyip js klasörü içerisine çıkartalım.

gulp typescript

bu işlemi yaptıktan sonra klasörünüz içersinde js isminde bir klasör ve onun içerisinde test.js isminde bir dosya olduğunu göreceksiniz. Aynı işlemi

gulp sass

yazarak scss içinde yapabilir css klasörünü ve test.css dosyasının oluştuğunu görebilirsiniz. Ancak bizim istediğimiz sadece bu değil her seferinde komut satırından komut çalıştırarak derleme işlemlerini yapmak yerine dosya her düzenlendiğinde derleme işleminin yapılmasını istiyoruz. Burdada imdadımıza gulp.watch yetişiyor. Aşağıdaki yeni taskımızı yukarıda eklediklerimizin altına ekleyelim

gulp.task("watch", function () {
    gulp.watch("./*.scss", ["sass"]) 
    gulp.watch("./*.ts", ["typescript"])
});

watch isminde yeni bir task tanımladık ve bu taskın görevi tüm scss dosyalarını izliyor ve bu dosyalarda herhangi bir değişiklik yapıldığında otomatik olarak sass derleme taskını çalıştırıyor. Aynı şekilde typescript dosyalarında herhangi bir değişiklik yapıldığı anda otomatik typescript derleme taskını çalıştırıyor. Komut satırına aşağıdaki kodu yazarak son eklediğimiz taskı çalıştıralım (watch taskını çalıştırdığımız komut satırını kapatmamamız gerekiyor)

gulp watch

Daha sonra klasördeki css ve js klasörlerini silelim ve ts ve scss dosyalarından birinde değişiklik yapalım. Değişiklik yaptığımız anda otomatik tüm derleme işlerinin yapıldığını göreceksiniz.

Yazının başında söylediğim gibi gulp.js ile ilgili birçok eklenti bulunuyor tamamen sizin hayal gücünüze kalmış istediğiniz herşeyi otomatikleştirebilirsiniz. Bu yazıda nedir ne işe yarar gibi sorulara yanıt vermeye ve amacını anlatmaya çalıştım umarım faydalı olmuştur.

 

Bir cevap yazın