Gulp Nedir? Gulp Kurulumu ve Kullanımı

Gulp Nedir? Gulp Kurulumu ve Kullanımı

Eğer bir front-end developersan belki de en büyük yardımcın GulpJs olacaktır. Peki Gulp nedir? Nasıl kullanılır? Gelin birlitke inceleyelim ve öğrenelim.

Gulp Nedir?

Aslında kısa bir cümle ile açıklamak gerekirse Gulp bir javascript task runner (javascript görev çalıştırıcısı)‘dır. Peki javascript task runner ne işe yarar diye örneklerle açıklayacak olursak eğer;

  • Mesela bir SASS dosyası yazdınız ve bunu tarayıcıların anladığı dil olan CSS’e çevirmek için derleme programı kullanmak zorundasınız. Bu işlemi Gulp ile hızlı ve kolay bir şekilde yapabilirsiniz.
  • Yada CoffeeScript, TypeScript, vb dilleri kullanıyorsunuz bunları javascript (.js) olarak derleyebilirsiniz.
  • Bir başka örnek verecek olursak HTML, CSS ve Javascript kodlarınızı sıkıştırabilirsiniz.

Örnekleri sıralamak ile bitmez aslında.  Şimdi Gulp hakkında kısa bir bilgi sahibi olduğumuza göre gelin kurulumunu birlikte yapalım.

Buraya dikkat! İlk defa kuracaklar için bilgisayarınızda NodeJs’nin kurulu olup olmadığını kontrol etmeniz gerek. Bunun kontrolü için bilgisayarınızın komut istemi (Çalıştır > cmd) bölümünde node -v yazmanız yeterlidir. Eğer NodeJs kuruluysa size versiyonunu verecektir. Aksi halde kurulu değil demektir.

NodeJs Kurulumu

Bilgisayarımıza NodeJs kurmak için http://nodejs.org adresine giriyoruz. Adrese girdiğimiz zaman biri aşağıda ki gibi bir ekran karşılıyor.

NodeJs

Bu alanda sol tarafta ki 8.9.4 LTS yazan son sürüme tıklayarak çıkmış olan en son kararlı sürümü bilgisayarımıza indiriyoruz. Sağ tarafta yer aalan 9.4.0 Current yazan kısımda geliştirmeye devam edilen olan ve son özellikleri yer aldığı beta bir nevi karasız sürümüdür. İkisinden birini indirebilirsiniz fark etmez. Ama kararlı sürümü indirmeniz daha yararlı olacaktır.

Evet, indirme işlemimiz bittiği zaman exe’yi çalıştırıp kurulumu yapıyoruz. Kurulum aşaması bittiği zaman başarılı olup olmadığını Çalıştır > cmd yazarak komut sistemini çalıştırıyoruz ve node -v yazarak sürüm kontrolü sağlıyoruz. Eğer başarılı bir kurulum gerçekleştirmişsek bize aşağıda ki gibi sürüm bilgisi verecektir.

NodeJs Sürüm Kontrolü

NodeJs kurulumu yaptığımız zaman bilgisayarımıza otomatik olarak npm kurulumu da gerçekleşmektedir. Bunun da başarılı bir şekilde kurulumun gerçekleşip gerçekleşmediğini kontrol etmek için komut isteminde npm –v yazarak versiyon kontrolünü sağlayabiliriz. Peki nedir bu NPM diyecek olursak eğer Node Package Manager‘in kısaltmasıdır. Yani NodeJs içerisinde Gulp ve diğer eklentileri kullanmak için indirmemize ve yüklememize yardımcı olacak kod bloğu diyebilirim.

Gulp kurulumuna geçmeden önce projemizde kullanacağımız araçları initalize etmesi bir nevi tutması ve derlemesi için bir adet package.json dosyasına ihtiyacımız var. Bu dosya içerisinde projenizin adı, açıklaması, anahtar kelimeleri, versiyonu, lisansı gibi bilgiler bulunur. Bunun için komut istemine yada terminale

yazmamız yeterli olacaktır.

Eğer boş ve hızlı bir package.json oluşturmak istiyorsanız npm init -y yazabilirsiniz.

Buraya dikkat! Bu NodeJs kurulumu bittikten sonra npm init dahil olmak üzere bütün komut satırlarını projenizin olduğu klasör içinde oluşturmanız gereklidir. Bunu kullandığınız editörün terminal kısmını kullanarak yapabilir yada windows/mac komut istemini kullanarak proje klasörüne girerek oradan da yapabilirsiniz.

Ben npm init -y yazarak bir json dosyası oluşturdum ve içerik aşağıda ki gibi;

Gulp Kurulumu

Hazırlıklarımızı yaptığımıza göre artık Gulp kurulumuna geçebiliriz.  Terminal üzerinde

yazarak kurulum işlemine başlıyoruz. Görselde ki gibi kurulum başlayacaktır.

Gulp kurulumu.

Kurulum bittikten sonra package.json dosyamıza Gulp eklentimizin eklnediğini görebilirsiniz.

Gulp Kullanımı

Mesela ben Gulp’u yazmış olduğum SCSS dosyalarımı derleyip CSS haline getirmesini için kullanmak istiyorum. Bunun Gulp’un SASS dilini anlaması lazım değil mi? Bu yüzden Gulp’un SASS dili eklentisini kurmamız lazım. Bunun için de yine terminal üzerinde

yazarak eklentimizi kuruyoruz. Bu eklenti ile artık SASS dosyalarımızı tanıyarak gerekli derlemeleri yapabileceğiz.

Kurulum bittikten sonra artık klasörümüz içerisine gulpfile.js dosyamızı oluşturabiliriz. Gerekli bütün kodlarımızı aslında bu dosya içerisine yazacağız. Şimdi bu kodlar nedir onlara birlikte göz atalım.

İlk olarak kurmuş olduğumuz gulp ve sass kütüphanemizi dosyamıza çağıralım. Bunun için gulpfile.js içerisine

Bu kodu bu şekilde değil de daha kısa olması için

şeklinde de yazabiliriz.

Gerekli tanımlamaları yaptıktan sonra şimdi sıra geldi bu çağırmış olduğumuz kütüphaneleri çalıştırmaya. Bunlar için daha doğrusu her birisi için bir adet task oluşturmamız gerekiyor. İlk olarak sass taskımızı oluşturalım.

şimdi yazmış olduğumuz kodu satır satır inceleyecek olursak eğer;

  1. derle adında bir task oluşturduk.
  2. return komutu ile şu işlemleri yap geri dön emrini verdik ve bir dosya adresi belirledik. /scss klasörü içerisinder ki index.scss‘i al işleme sok dedik.
  3. Bu dosyayı eklemiş olduğumuz sass kütüphanesinden geçirmesini istedik.
  4. Ve son olarak derlenen dosyayı ana dizine çıkarmasını istedik.

Şimdi index.scss dosyamızı açalım ve içine basit bir SCSS kodu yazalım ve kayıt edelim.

Terminalimizi açalım ve yazdığımız taskı çalıştıralım. Bunun için gulp derle yazmanız yeterli olacaktır.

Gulp task çalıştırma.

Taskımız çalıştıktan sonra ana dizine index.css dosyasının eklediğini görebiliriz. İçerisine açtığımız da SCSS dosyamızın derlenmiş olarak CSS dosyasına çevrilmiş olduğunu görebiliriz.

Gulp Watch Kullanımı

Peki şimdi SCSS dosyamızda her değişiklik yaptığımızda sürekli terminal üzerinden gulp derle mi yazmamız lazım? Hayır gerek yok. Bunun için watch kütüphanesini kullanabiliriz. Peki nedir bu watch kütüphanesi ve ne işe yarar? Projemizde izlemesini istediğimiz dosya ve klasörleri takip eder ve bir değişiklik olduğunda o dosyaların yada klasörlerin bağlı olduğu taskları otomatik olarak çalıştırır ve size sadece sayfanızı yenilemek düşer. Süper değil mi? 😀

Gelin şimdi watch kütüphanesinin kurulumunu gerçekleştirelim. Gulp ve Sass kütüphanelerini kurduğumuz gibi aynı şekilde watch kütüphanesini de terminal üzerinden

yazarak kurulumunu gerçekleştirelim. Kurulum işlemi bittikten sonra gulpfile.js dosyamıza yine diğerlerini çağırdığımız gibi watch kütüphanemizi de çağıralım

tamamdır. Şuana kadar herşey mükemmel. Şimdi son olarak yapmamız gereken tabii ki çalışması için watch için de bir adet task oluşturmak. Unutmayın kütüphaneleri çağırmak yetmiyor bunları kullanabilmek için bir görev yani task eklememiz lazım ki işleme girsin.

Yine bir adet task oluşturduk ve adına watch verdik. Siz buraya istediğiniz ismi verebilirsiniz. İsterseniz watch yerine izle yazabilirsiniz. Bu tamamen sizin kullanım alışkanlığınıza göre değişir. Şimdi birlikte tekrardan yazdığımız task satır satır inceleyelim.

  1. watch adında bir task oluşturduk.
  2. gulp.watch kütüphanesini kullanarak scss klasörü içinde ki tüm klasörler dahil ve uzantısı tüm .scss olan dosyaları kontrol et ve değişiklik olduğunda derle taskını çalıştır.

Dikkat ederseniz ./scss/**/ şeklinde bir komut kullandık. Bu scss klasörü içerisinde ki tüm klasörler anlamına gelmekte. Bunu bilmenizde fayda var.

Artık biz index.scss dosyamızda her değişiklik yaptığımızda gulp derle yazmak yerine sadece bir kere gulp watch komutunu çalıştırarak projemiz üzerinde kodlarımızı yazmaya başlayabiliriz. Tabii ki siz eğer task adına başka bir isim verdiyseniz gulp watch yerine bu ismi yazmanız gerekmektedir.  Bun sonra ki .scss dosyalarında olan her değişiklikte kaydettiğimiz zaman otomatik olarak derle komutu çalışacak ve ana dizinde ki css dosyamıza çıktığını görebilirsiniz.

Bir de gulpfile.js dosyamızın son halini birlikte görelim.

Tabii ki Gulp sadece bu iki iş için kullanılmıyor en baştada dediğim gibi bir çok iş için kullanabilirsiniz hatta bu adresten kontrol ederseniz tam olarak 3423 tane plugin (kütüphane) olduğunu görebilirsiniz. Siz gulpfile.js dosyanızı keni projenize düzenleyebilir ve işlerinizi hızlandırabilirsiniz. Şimdiden kolay gelsin.

Benden şimdilik bu kadar arkadaşlar. Umarım faydalı ve eğitici bir makale olmuştur. Herkese bol kodlu günler diliyorum. 🙂

Ahmet Kaplan

1987, İstanbul doğumlu. Front-End Developer.

Son Yazılar
Bir cevap bırakın