GulpJS Nedir? Nasıl Kullanılır?

gulpnedir

Merhabalar,

Bu yazımızın konusu front-end tarafında oldukça sık kullanılan araçlardan birisi olan GulpJS isimli araç olacak. Benim alanım aslında back-end tarafı fakat şu sıralar hobi olarak birazcık front-end tarafına yönelmiş bulunmaktayım, sanırım front-end tarafındaki böyle güzel araçları kıskandığım için olabilir :). Bu aralar birde coffeescript öğreniyorum, yakın zamanda bununla ilgili de bir “Coffeescript Öğreniyorum” yazı serisi yazmayı planlamaktayım. Aslında bu yazıyı yazmamdaki sebep de biraz o yazı serisinde GulpJS kullanacağım için önceden GulpJS aracını ayrı bir şekilde anlatmak istedim. Yazımız başlıklar şeklinde ilerliyor olacak, öyleyse hemen “GulpJS Nedir?” sorunu cevaplamakla başlayalım.

GulpJS Nedir?

GulpJS, “İnsanlar konuşmak içindir; bilgisayarlar ise iş yaptırılmak için.” felsefesinden yola çıkarak oluşturulmuş NodeJS tabanlı bir ‘işlemleri otomatize etme’ aracıdır. Mesela siz daha verimli olduğu için SASS/LESS, Jade/Haml ve Coffeescript gibi farklı teknolojilerden yararlanmaktasınız. Yani yaptığınız işlemlerin çıktısını görebilmek için bir komut çalıştırmanız gerekiyor. İşte GulpJS tam da bu noktada devreye girerek, üzerinizden bu yükü alıyor diyebiliriz. Tek bir komutla SASS/LESS kodlarınızı CSS’e, Jade/Haml kodlarınızı HTML’e, Coffeescript kodunuzu Javascript’e çevirip, çok rahat bir şekilde paylaşabileceğiniz buildleri elde edebilirsiniz. Üstelik sadece bunlar değil GulpJS için geliştirilmiş bir sürü farklı modül bulunmakta. Örneğin resim dosyalarının boyutlarını minify edebilir, javascript kodunuzda ki hataları JSHint ile tespit edebilir yada javascript dosyalarınızı sıkıştırabilirsiniz(jquery-min gibi) vb. bir sürü işlemi GulpJS ile otomatize edebilirsiniz. Üstelik tüm bunları istediğiniz gibi özelleştirip kullanabiliyorsunuz her hangi bir sınırlama olmadan. Şimdi anlıyor musunuz back-end tarafında olmama rağmen neden front-end tarafına merak saldığımı, sizce de çok güzel bir araç değil mi? Gerçi back-end tarafında da gayet güzel araçlar mevcut şimdi hakkını yemeyelim ama front-end daha görsel çalışmaya yönelik olduğu için sanırım biraz daha ilgimi çekiyor, tabii bu ilgi hobi olarak ilgilendiğim bi’ alan yoksa uzmanlık alanımı çoktan back-end tarafı olarak seçmiş durumdayım ben. Her neyse “peki nasıl kurup kullanacağız biz bu GulpJS aracını?” dediğinizi duyar gibiyim. Öyleyse sizi daha fazla meraklandırmadan önce kurulumu daha sonrada kullanımı ile ilgili bilgiler vereyim.

Kurulum

Kurulumu son derece basit bir araç eğer bilgisayarınızda NodeJS hali hazırda kurulu ise konsolunuza:

npm install -g gulp

yazıp kurulumun bitmesini beklemek ve daha sonrasında kurulumun başarılı bir şekilde tamamlanıp tamamlanmadığını kontrol etmek ve gulp versiyonumuzu öğrenmek için ise:

gulp -v

komutunu çalıştırmanız yeterli olacaktır. Artık GulpJS emrinize amade bir şekilde iş vermenizi bekliyor.

Kullanımı

GulpJS’den önce NodeJS Package Manager’ı(npm) initialize etmemiz gerekiyor ki projemizde kullandığımız NodeJS kütüphaneleri package.json isimli dosyamızda toplansın ve bu sayede github gibi platformlarda paylaştığımızda insanlar direk “npm install” komutunu çalıştırarak gerekli olan tüm kütüphaneleri indirebilsinler. Bunun için önce şu komutu çalıştırmanız ve bir kaç soruya cevap vermeniz yeterli olacaktır:

npm init

komutunu çalıştırdığınız da şu soruları cevaplayacaksınız, şimdiden soruları vererek kopya vereyim ben size 🙂

npm init komutunun çıktısı
npm init komutunun çıktısı

Sizde bu şekilde bir çıktı alıyor iseniz, NodeJS Package Manager’ı başarılı bir şekilde initialize edebilmişsinizdir. Şimdi de:

npm install gulp --save

komutunu çalıştırarak GulpJS aracını projemize dahil edelim. Bu komutu çalıştırdıktan sonra package.json dosyamıza bakarsak şöyle bir satırın eklenmiş olduğunu görebiliriz:

"devDependencies": {
  "gulp": "^3.9.0"
}

Buda başarılı bir şekilde dahil edebildiğimizi gösteriyor.

Şimdi bir senaryo üzerinden ilerleyerek GulpJS aracını kullanalım. Senaryomuz şu şekilde olacak; Template engine olarak Jade, stillendirme için SASS ve script yazmak için Coffeescript kullanacağız. Tabii ki de her zamanki gibi bir ‘hello world’ örneği tasarlayarak anlatacağım. Bu ‘hello world’ örneğinin: html kısmını Jade ile; stillendirme kısmını SCSS ile; tıklanınca çalışacak event’ı yazmak için ise Coffeescript kullanacağız. Haydi o zaman işe koyulalım. Öncelikle klasör yapımız bu şekilde olacak-ki düzenli bir şekilde çalışabilelim-:

directorysrc klasörü, sizinde anlayacağınız üzere tüm çalışmalarımızın yapılacağı klasör olacaktır. Siz de klasör yapınızı bu şekilde ayarladıysanız artık dosyalarımızın içerlerini doldurmaya başlayabiliriz. Öncelike index.jade dosyamızı yazalım:

 

.wordpress.com uzantılı bir sistemim olduğundan dolayı maalesef eklentimde jade, sass ve coffescript için renklendirme özelliği bulunmuyor bu nedenle kodları güzel bir şekilde gösteremiyorum sitemde o yüzden sizi github repository’me davet edeceğim şu şekilde: https://github.com/erenhatirnaz/gulpjs-example/blob/master/src/index.jade Aynı şekilde script.coffee ve style.scss dosyalarımızı da bu şekilde hazırlıyoruz. Bu dosyaları bu şekilde hazırladıktan sonra artık yazımızı ilgilendiren kısıma geçebiliriz. yukarıdaki görseldeki gibi projemizin ana dizinine gulpfile.js isimli bir dosya oluşturuyoruz ve kodlamaya başlıyoruz. Fakat kodlamaya başlamadan önce gerekli gulp eklentilerini kurmamız gerekiyor, nedir bu gulp eklentisi diye sorduğunuzu duyar gibiyim hemen cevaplayayım. GulpJS tek başına sadece tasklar yazıp bu taskları çalıştırabildiğimiz bir araçtır fakat biz bu projemizde jade dosyalarını html’e, coffeescript dosyalarını javascript’e ve sass dosyalarını css’e çevirmek istiyoruz işte tam da bu noktada başka geliştiricilerin yazmış olduğu third party pluginler yardımımıza koşuyor fakat önce onları kurmamız gerekiyor ki bize yardım edebilsinler hemen şu komutları çalıştırarak kurulumları en basit şekilde tamamlayabilirsiniz:

npm install gulp-jade
npm install gulp-sass
npm install gulp-coffee
npm install gulp-zip
npm install del

Bu komutları çalıştırmanız gerekli eklenti kurabilmeniz için yeterli olacaktır. Şimdi gulpfile.js içerisinde tasklarımızı yazmaya başlayabiliriz. Şu(https://github.com/erenhatirnaz/gulpjs-example/blob/master/gulpfile.js#L1-25) adresdeki gibi sadece seçilmiş olan satırları ve default isimli taskı yazmanız yeterli olacaktır yazmanız, yazımızın bu noktasında yeterli olacaktır. Şimdi ne yaptığımızı açıklayalım.

Öncelikle tabii ki de değişkenler oluşturarak GulpJS aracıını ve eklentilerini dahil ettik. Daha sonra ise tek tek tasklarımızı yazdık. Biraz daha detaylı bakacak olursak:

gulp.task('[taskımızın ismi]', function(){
  // buraya ise taskımız çalıştırıldığında gerçekleşecek işlemleri kodluyoruz.
});

Taskımız çalıştığında gerçekleşecek olan işlem için genelde öncelikle gulp.src(‘[hedef dosyalar]’) ile başlanır ki istediğimiz dosyalar üzerinde işlem yapabilelim. Github üzerindeki gulpfile.js dosyasına bakarsanız ben jade task’ı içerisinde hedef dosyalar olarak ‘src/*.jade’ seçmiş bulunuyorum. Yani src klasörü altındaki tüm .jade ile biten dosyaları seçtim. Devam edelim ardından birde pipe() fonksiyonumuz var bu da seçilmiş dosyalar üzerindeki bir işlem yapabilmemizi sağlar, yine github üzerindeki gulpfile.js dosyasına bakarsanız ben bu noktada jade taskı içerisindeki ilk pipe() fonksiyonun içerisine jade() yazmış bulunuyorum, yani yukarıda tanımladığımız değişkenin ismi, yani gerekli olan gulp eklentisini çalıştırıyoruz. Yine devam edelim bu sefer yine pipe() fonksiyonu var fakat bu sefer içerisinde gulp.dest(‘dist/’) yazmakta, bu fonksiyon da bir önceki pipe() işleminden gelen dosyaları bir yere kaydetmemizi sağlar, bu yeride biz belirtiyoruz tabii ki de tırnak içerisinde örneğin ben ‘dist/’ olarak belirlemişim. Ben sadece jade taskını anlattım şuan fakat diğer tasklara bakcak olursanız hemen hemen aynı işlemlerin yapılmış olduğunu göreceksiniz. İsterseniz şimdi yazmış olduğumuz taskları çalıştırıp çıktılarını görelim.

İsterseniz;

gulp jade
gulp sass
gulp coffee

şeklinde tek tek yazıp çalıştırabilirsiniz isterseniz de;

gulp jade sass coffee

şeklinde tek satırda işi bitirebilirsiniz, yalnız burada taskların sırası önemli çünkü yazdığınız sıraya göre çalışacak tasklarınız. Ben ikinci ve kısa olan yöntem ile çalıştırmayı tercih ediyorum.

cikti
gulp jade sass coffee komutunun çıktısı

Gördüğünüz gibi hangi sırayla yazdıysak o sırayla çalıştı tasklarımız. Şimdi de default taskını anlatmak istiyorum. İsminden de anlayacağınız üzere default taskı hiç bir task ismi yazılmadığında çalışacak olan taskımızdır. Yani yukarıdaki gibi “gulp jade” değilde sadece “gulp” yazdığımızda çalışacak olan taskdır. default taskımızın kodlarına bakacak olursak;

gulp.task('default',['ilk task', 'ikinci task', (...)]);

Dizi içerisinde yazdığımız sıraya göre tasklarımız çalışacaktır. İsterseniz sadece “gulp” komutunu çalıştırarak çıktıyı görebilirsiniz. Üsteki çıktı ile aynı olması gerekmektedir. Şimdi birde tasklarımız doğru çalışmış mı onu kontrol edelim. Proje klasörümüze bakacak olursak dist/ isminde bir klasör oluşturulduğunu görebilirsiniz. Hemen içerisindeki index.html dosyasını açalım ve kontrol edelim:

hellogulpjs
Yazdığımız Jade, Sass ve Coffeescript kodlarının işlendikten sonra ki çalışma hali.

Eğer sizde de bu şekilde çalışıyor ise tasklarımız sorunsuz bir şekilde çalışıyor demektir. Zaten kodlarımızda bir hata olsa taskların çalıştırılması sırasında hata ile karşılaşırdık. Şimdi geriye iki taskımız kaldı onları anlatıp yavaş yavaş yazımı bitirmek istiyorum. Bunlardan ilki ‘zip’ taskı, yine isminden anlayacağınız üzere bu taskımız da birşeyleri zip’leyeceğiz hemen taskımızı inceleyelim:

gulp.task('zip', ['jade', 'sass', 'coffee'], function(){ // task isminden sonra gelen dizi, bu task çalıştırılmadan önce çalıştırılması gereken taskların isimlerini içeren dizidir.
 gulp.src("dist/*") // dist/ klasörü içindeki herşeyi
 .pipe(zip('hellogulpjs.zip')) // hellogulpjs.zip isminde ziple
 .pipe(gulp.dest("")) // ve bu dosyayı anadizine kaydet
});

Yani “gulp zip” yazdığımızda öncelikle sırasıyla jade, sass ve coffee taskları çalışacak sonrasında ise zip taskı çalışacak. Peki neden böyle bir şey yaptık? Çünkü önceden gulp jade, gulp sass yada gulp coffee çalıştırılmamış ise dolayısıyla dist/ isminde bir klasör de olmayacak ve zipleme işlemi sırasında hata ile karşılaşabiliriz yada boş bir klasörü zipleyebiliriz. Bu nedenle önce bu taskları çalıştırdık ki öncelike dist/ klasörümüz oluşsun. Şimdi isterseniz “gulp zip” komutunu çalıştırın ve çıktısını görün

Bir diğer taskımız ise ‘clean’, yine isminden anlayacağınız üzere temizleme yapmak için yazmış olduğumuz bir task. Her hangi bir nedenden dolayı dist/ klasörünü yada her hangi bir dosyayı silmek isteyebilirsiniz. Bende bu nedenle bu taskı eklemiş bulundum. Benim yazdığım task hem dist/ klasörünü hem de hellogulpjs.zip dosyasını siliyor. Tabii bu klasör yada dosya yoksa her hangi bir işlem yapmıyor. Bu taskımızın içerisinde de yine yukarıda tanımlamış olduğumuz dell isimli NodeJS kütüphanesini kullandık dosya yada klasör silmek için.

Son olarak size bir ödev vererek yazımı bitirmek istiyorum. Araştırıp bu projeye uygulamanız gereken konu: gulp-watch kullanımı. Bunu yaptığınız takdir de artık her seferinde komutları çalıştırmak yerine siz dosyayı kaydettiğiniz de otomatik olarak komutlar işlenecek bu özellikten faydalanmak istiyorsanız(ki istersiniz sanırım) biraz araştırma yapıp uygulamanız gerekiyor, ki çok kısa bir işlem zaten ama ben yinede bu yazıda anlatmayacağım bir sorunla karşılaşırsanız yorumlardan yardım edebilirim. Ayrıca bu yazıda yapmış olduğum uygulamaya github üzernden erişebilirsiniz: https://github.com/erenhatirnaz/gulpjs-example

Umarım faydalı bir yazı olmuştur.
Başka bir yazıda görüşmek üzere,
Esenle kalın…

Reklamlar

GulpJS Nedir? Nasıl Kullanılır?” üzerine 3 yorum

Yorum yazmak için;

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s