Ben galp Gulp! — 1

  • Bir gün sonrasında “B olayı daha güzel çözmüş, A’yı ne kullancam yea” diyoruz.

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.

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.

Pair programming’in robotlusu desem çok mu saçma olur bilemesem de demek istiyorum sayınokuyasıca.

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.

3. Görevlere ihtiyaç hikayesi uydurarak örnekleyelim.

İhtiyaç Hikayeleri

  1. 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. 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.
  3. 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ü

  1. 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.
  2. 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.
  3. 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.

mkdir example
cd example

Şimdi klasörümüzde npm kullanmak için projemizi npm’e tanıtıp, gulp’ı kuralım.

npm init
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) MIT
npm install --save-dev gulp
echo 'var gulp = require('gulp');' > gulpfile.js
  • gulpfile.js dosyası
  • package.json dosyası
npm install --save-dev gulp-imagemin

Ş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
  • 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.
sisman.jpg adıyla src klasörünün altına ekledim bu jpg dosyasını.

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.

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.

  • 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)
gulp imajlari_kucult

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.

--

--

https://keremciu.github.io/ front-end developer #react #redux #gulp #js

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store