Ben galp Gulp! — 1
Bu sıralar iş çevremde gözlemlediğim en belirgin sorulardan biri şöyle: arayüz geliştirme eskiye göre daha mı kolay? daha mı zor?
Bu soruyu cevapsız bırakıp etrafından dolanarak, öğrenmek zorlaştı demek istiyorum. Bence kolay takip edilemeyecek hızda büyük değişiklikler oluyor sektörün içinde.
- Bir gün önce “A harika!” derken,
- Bir gün sonrasında “B olayı daha güzel çözmüş, A’yı ne kullancam yea” diyoruz.
Bu durumlardan ötürü(*) yeni gelen bir çözümü tanıtmak bir hayli zor geliyor insana, o yüzden arkamdan “öküz ne biçim anlattı” diye söylenmeyelim bence.
Bu gereksiz girişgahımı yapıp kendimi tatmin ettiğime göre bir aşk hikayesine değinmek istiyorum, hint filmi kapağı gibin:
Ben ❤ Gulp!
Yanlış duymadınız gulp’la ben yani işte, anlarsınız ya hani. ama aramızda kalsın bak bu biraz menfaat ilişkisi. Siz hödük gibi nedir senin menfaatin diye sormadan ben söyleyim, kendisi bana arayüz geliştirirken yardımcı oluyor.
Kısaca Gulp: Sevilesi bir arayüz geliştirici yardımcısı.
Sorulu-Cevaplı Gulp (en sevdiğim)
Sorular, cevaplar saçma gelebilir. Şahsen bende nasıl anlatabilirim kısmını bilmeyen bir hödük olarak saçmalamaya müsaitim.
1. Gulp bir arayüz geliştiriciye nasıl yardım eder? (çay, kahve?)
Gulp için bir görev yöneticisi diyebiliriz. Siz gulp’a bir görev tanımlıyorsunuz; o da siz kod yazarken görevi yerine getiriyor.
2. Gulp’a görev vermek? bunun elinden ne iş gelir ki?
Gulp’ı yardımcı olarak gördüğümüz için ilk önce şunu cevaplamalı siz ne iş yapıyorsunuz? bu cevap önemli zira Gulp sizin yaptığınız iş(ler)i görev olarak sahipleniyor. Siz o görevle vakit kaybetmeyin diye kendisi hallediyor.
Kısaca işinizi yaparken amelelik olarak gördüğünüz her şeyi “bunu sen yaparsın be gülüm” diyerek gulp’a kitleyebilirsiniz.
3. Görevlere ihtiyaç hikayesi uydurarak örnekleyelim.
İhtiyaç Hikayeleri
- Projenizin imajlar klasörünün boyutuna bir baktınız 16 mb! Ne yapmak lazım? Tek tek veya bir multiple image resizer ile boyutunu küçültüp -olabilecek- en aza indirmek. Afedersin ama bu iş, her yeni bir imajda tekrarlanması gereken bir amelelik!
- 2 ekran ile geliştirme yapıyorum, bir ekranda kod editörüm bir ekranda tarayıcım mevcut. Her yeni html veya css eklediğimde gidip tarayıcıya “f5” tuşuna basıyorum. Bu f5 işi çok sinir bozucu.
- Proje içindeki ikonları daha efektif bir kullanımı olması için ikon font kullanalım dedik. Bir de baktık vektörel ikonu al, illustratorde aç, svg olarak kaydet sonra onu sketch gibi bir uygulamayla duzelt (boyut, renk falan) yok efendim sonra onu internetten bir font generator’a (*) yükle sonra oradan oluşan font’u indir, projeye csslerini vesair dahil et. Her yeni ikonda bu projeye dahil etmeydi, oydu buydu uğraş dur babam.
İhtiyaçların Çözümü
- Gulp üzerinde imajlari_kucult diye bir gorev tanımlayıp, şu klasördeki imajları şu klasöre küçülterek aktarak diyorsunuz. Bir de dinleyici tanımlıyorsunuz ki, sonrasında yeni bir imaj gelirse klasöre size “abi bunu napcaz?” diye sormadan algılayıp küçültsün.
- Gulp üzerinde tarayici_f5 diye bir gorev tanımlayıp, ben yeni kod bir yazarsam tarayıcıya gidip f5 tuşuna basar mısın diyoruz gulp’a. O da ne?! gulp bu ameleliği çok seviyor, dosyayı kaydetse de sayfayı bir yenilesem diyor. Tuhaf çocuk.
- Gulp üzerinde ikon_font diye bir görev tanımlayıp, şu klasör içindeki svg dosyalarını belirli bir düzene sokarak başına bir unicode ekle ve benim projemdeki css (sass,scss, vb…) dosyasına otomatik tanımla. Ta daa! Artık geriye tek iş yeni bir ikon geldiğinde klasörün içine svg dosyasını(örn: book.svg) yüklemek ve html içinde (class=”icon -book”) şeklinde kullanmak kalıyor.
Görevler, örnekler tamam peki Gulp ile çalışma ortamımı nasıl oluşturacağım?
Terminal veya command prompt ekranı kullanmak şart.
Gulp node.js üzerinde oluşturulmuş bir modül, npm tarafından beslenen bir arkadaş. Nedir bu npm? npm node.js’in paket yöneticisi (package manager). Node.js’i bilgisayarınıza kurduğunuzda npm de kuruluyor.
Peki nasıl başlicaz? node.js’i bilgisayarınıza kurduğunuzu varsayıyorum, ardından şu adresteki işlemleri incelemenizi öneririm, incelemişken bir de üstüne 1. adımdaki komutu çalıştırırsanız, tadından yenmez.
Bu kısmı yapamayanlar veya daha fazlasını merak edenler olabilir belki konu ile google keywordlerim: terminal commands, node.js install, gulp cheatsheet, npm cheatsheet.
Evet, npm de hazır; aman sabahlar olmasın. Bu yazı bir yazı dizisi olarak devam edeceği için korkmayın, en basitinden yavaş yavaş karmaşıklaştırcaz.
Terminal ekranında güzel bir dizindeyken:
mkdir example
cd exampleExample adında bir klasör oluşturduk ve klasörün dizinine giriş yaptık.
Şimdi klasörümüzde npm kullanmak için projemizi npm’e tanıtıp, gulp’ı kuralım.
npm initBu terminal komutu klasör içinde package.json oluşturmamıza yarar, bu komutu yazdıktan sonra projemizin adını, github linkini vesair tanımlamızı isteyecektir. Ben bu örnek proje için yazdıklarımı aşağıda paylaştım.
name: (example) example
version: (0.0.1) 0.0.1
description: Example project of Gulp.
entry point: (gulpfile.js) gulpfile.js
test command: gulp test
git repository: (git://github.com/keremciu/example)
keywords: gulp
author: Kerem Sevencan <info@kerem.ws>
license: (ISC) MITBunları tek tek yazdıktan sonra Is this ok? (yes) diye soracak bizde yes yazarak package.json dosyamızı oluşturmuş olacağız.
npm install --save-dev gulp
echo 'var gulp = require('gulp');' > gulpfile.jsVe artık example klasörümüzün içinde şunlar mevcut;
- node-modules klasörü
- gulpfile.js dosyası
- package.json dosyası
Not: Yukarıdaki gulp’ı projeye dahil eden terminal komutumuz neden --save-dev parametresini içeriyor? — save-dev parametresi eklediğimiz node.js modülünü (gulp modülü) package.json içerisinde devDependencies alanına tanımlıyor.
— Peki neden tanımlaması lazım abicim? çünkü projemizde birçok plugin kullandığımızda node_modules klasörü 400–500 mb’ı görebilir. E haliyle projeyi paylaşmak istediğinizde karşıya 410–510 mblık(?!) bir klasör göndermeniz gerekecek. Oysa node_modules klasörünü göndermezsek sadece 10 mb olacaktı klasörümüz ve rahatça gönderebilecektik.
Ve geldik node.js’in kuyruğunun koptuğu yere.
— Karşı tarafa node_modules klasörünü göndermek zorunda değilsin! Karşı taraf 10 mblık proje klasörünü senden aldıktan sonra package.json içerisinde tanımlı olan node modüllerini “npm install” komutu ile kolaylıkla proje klasörüne dahil edebilir. Harika değil mi? evet o zaman — save veya — save-dev kullanmadan projemize node modülü eklemeyelim.
Bu dakikadan sonrası ise gulp için hazır yazılmış gulp pluginlerini projeye dahil etme ve kod yazmaya kalıyor.
Yukarıda ilk verdiğim ihtiyaç örneğini çözelim, imajları küçülten bir Gulp görevi oluşturalım. Bunun için projeye dahil edeceğim gulp plugini gulp-imagemin.
Projeye plugin dahil etmek için terminal ekranında şu komutu çalıştırıyorum:
npm install --save-dev gulp-imageminve projemize gulp-imagemin pluginini dahil ettik şimdi onu gulp’ta yazacağımız görev için kullanalım.
Şimdi projemizde gulp-imagemin pluginimiz var fakat klasörümüzün içinde bu pluginin çalışabileceği hiçbir gorsel imajimiz yok.
Bunun için terminal ekranından çalışma ortamımızı genişletelim.
mkdir src
mkdir buildŞu an src ve build adında iki farklı klasör oluşturduk.
- src adındaki klasör kaynak dosyalarımızı içerecek yani işlenmemiş dosyalar burada tutulacak. Neden src diye adlandırdım derseniz, src source kelimesinin kısa hali olarak çokça tercih ediliyor.
- build adındaki klasör işlenmiş, işlemden geçmiş dosyalarımızı içerecek. Neden build diye adlandırdım derseniz, keyiften valla.
Güzel dosyaların nerede duracağı da tamam. peki ne eksik? imaj dosyası. src klasörüne bir adet jpg dosyası aktarıyorum.
Kodlamaya geçmek için her şeyimiz hazır!
Koda gireceğim kısımda buraya yazmayı bırakıp kod parçacıklarının üstüne // bu şu işe yarıyor şeklinde not düşerek anlatacağım.
Ön bilgi olarak node.js nasıl çalışırı anlatmam zor ama kısaca node.js CommonJS’in modül sistemini kullanmakta. Node üzerindeki her şey birer modül olarak geçiyor ve siz bir js dosyası içerisinden require metodu ile bir node.js modülünü çağırabiliyorsunuz.
Kodlama bitti.
Umarım yazdığım notlar kafanızı çok karıştırmıştır, kendi öğrenme mantığım olguları tamamen anlayarak kullanmak olduğu için tüm olguları tek tek uzun uzun açıklamaya çalıştım. Bazı kısımları yanlışta söylemiş olabilirim, geveze biri olduğum için yazarken gereksiz veya yanlış zırvalayabiliyorum. Olur yani öyle, olmaz değil.
Şimdi bu ana kadar yaptıklarımızı bir ele alalım. Bir klasörümüz var adı “example”. Çalışma ortamımız bu klasörden ibaret.
İçindekiler:
- build klasörü (işlenmiş dosyaları içeriyor)
- node_modules klasörü (gulp pluginlerimizi barındırıyor)
- src klasörü (işlenmemiş dosyaları içeriyor)
- gulpfile.js dosyası(gulp görevlerimizi içeriyor)
- package.json dosyası (projemizin detaylarını ve bağımlılıklarını [dependencies] içeriyor)
Peki, ne işe yarıyor bunca yaptıklarımız. Artık ilk ihtiyaç örneğimizi çözmek için yapmamız gereken terminal ekranında:
gulp imajlari_kucultbu komutu çalıştırmak. Bu komut ile birlikte src klasöründeki jpg dosyaları build klasörünün içerisine optimize edilmiş halde aktarılacak.
Bugünlük bu kadar. Gulp’a uzun bir giriş yaptığımızı düşünüyorum, bende yoruldum yani gidip bir kahve içeyim, maç izleyim falan lig başladı sonuçta.
Kendinize güzel bakın.
Sırada ne var?
Bundan sonraki yazımda sizlere Gulp ile daha karmaşık görevler oluşturmayı, birden çok görev ile çalışmayı vesair anlatacağım. Yazı serisi yeteri ilgi görürse, gulp için bir plugin nasıl yazılabilir, best practiceler nedir üzerine yoğunlaşıp olayın güzelleşebileceği noktalara gidebiliriz.
— allam, yarın gulp’a alternatif çıkıp bu yazıyı çöp yapmasın, dinimiz amin
— beni twitter’dan takip edebilir, bu yazıyı recommend edebilirsiniz falan bakın, bunlar güzel şeylerdir.
Dipnot: Yukarıda yazdığım her şeye kefil değilim, belki cahilliğimden yanlış bildiğim olaylar, olgular olabilir. Beni bu konuda aydınlatan olursa çok bi’ sevinirim. Kod kısmına kefilim.
— bu arada takıldığınız bir kısım olursa, takıldığınız kısmın sağ tarafına “comment” ekleyerek bunu belirtirseniz, takıldığınız yerde yardım etmeye çalışırım ve daha sonra aynı yerde takılabilecek insanlara önceden bilgi verebileceğimiz bir alan turemis olur.
