CSS ile Mobilde Kaydırma Hassaslığı

Bildiğiniz gibi mobil için ayrı ayrı css kodları yazmak durumundayız, çünkü mobil tarayıcılar henüz her özelliği desteklemediği gibi, sadece mobil tarayıcılar için özelliklerde mevcut. Hal böyle olunca, yazarken dikkat edilmesi gereken bazı durumlar oluyor. Bu makalede en temel problem olan kaydırma problemini ele alacağız.

Nedir bu problem dersenizde, aşağıdaki gif’e gözatalım;

Şimdi bunun html ve css kodları şu şekilde;

<div class="content">
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
........
</div>
<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
}
</style>

Hal böyle olunca kayma hassaslığı yok, ios cihazlarda boncuk boncuk kayar normalde. İşte kaymaya bu ivmeyi kazandırmak için css’de ufak bir kod eklemek gerekiyor. Yani kısaca;

<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
</style>

Ve sonuç ise;

İyi kodlamalar <3

.htaccess ile HTTPS’ten HTTP’ye Otomatik Yönlendirme

Uzman cevap’ın ssl’ini iptal edip normala döndürmek istedim ancak araştırmalarım ve bilgilerim doğrultusunda PHP ile bunu sağlıklı şekilde yapmak mümkün olmadı. Eğer ihtiyacınız olduğunda araştırdığınızda görmüşsünüzdür, eğer $_SERVER[‘HTTPS’] değeri on ise yönlendirme işlemi yaptırıyorlar. Ancak ne yazık ki ben bu değerin on olduğunu hiç görmedim 😀 Bunun sebebide sanıyorum ssl’i cloudflare’dan kullandığımız için. Ama sonunda .htaccess ile yönlendirme yapmanın bir yolunu buldum. İşte size o güzel kodlar;

RewriteCond %{HTTP:X-Forwarded-Proto} =https
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Keyifli kodlamalar.

PHP ile MySQL ve Klasör Yedeği Almak

Merhaba arkadaşlar, 2 bölümlük bir video serisi hazırladım. Sırasıyla önce mysql’in sonrada klasör’ün yedeğini PHP kullanarak nasıl alıyoruz bunu gösterdim. Bu yazıda da ufaktan mantığını açıklamaya çalışacağım.

MySQL Yedeğini Almak

Şimdi ilk olarak Mysql’in yedeğini almak için türlü türlü yol var, ancak çoğu konfigürasyon gerektiriyor. Yani özel ayar yapmak gerekiyor, fakat paylaşımlı hostinglerde bunlara müdahale edilmediği için bu backup işlemini mümkün olduğunca php tarafında çözmeye karar verdim.

Bundan dolayı, php tarafında sırasıyla şu değerleri almam gerekiyordu;

  • Tabloların Listesi
  • Tablonun Oluşturulma Değerleri
  • Tablonun Kolon Değerleri
  • Tablonun Satırları (Verileri)
  • Trigger’lar
  • Function’lar
  • Precodure’ler

Tabl0ların Listesini Almak

Veritabanımızda mevcut tabloları listelemek için şu komutu kullanıyoruz;

SHOW TABLES;

Bu komut bize tüm tablolarımızın isimlerini veriyor.

Tablonun Oluşturulma Değerleri

Mevcut tablonun oluşturulma değerlerini almak için şu komutu kullanıyoruz;

SHOW CREATE TABLE tablo_adi

Bu komutu çalıştırdıktan sonra bize CREATE TABLE tablo_adi …. şeklinde oluşturma kodlarını verecek. Böylece bizim yazmamıza ve düşünmemize gerek yok.

Tablonun Kolon Değerlerini Almak

Tablodaki oluşturduğumuz kolonların değerlerini almak için şu komutu kullanıyoruz.

SHOW COLUMNS FROM tablo_adi

Bu komutu çalıştırınca bize tabloya ait kolonların değerleri dönüyor.

Tablonun Satırlarını (Verilerini) Almak

Bu klasik select işlemi ama yinede gösterelim;

SELECT * FROM tablo_adi

Trigger’ları Almak

Zaman zaman crud işlemleri harici bu tarz yapılara ihtiyaç duyuyoruz. Ve eğer çalıştığımız veritabanı üzerinde oluşturduğumuz trigger, function, procedure gibi yapılar var ise bunlarıda alacağımız yedek dosyasına dahil etmemiz gerek. Ama korkmayın, mysql bizi düşünmüş ve kolay yollarını vermiş. Şimdi mevcut triggerları listelemek için şu komutu kullanıyoruz;

SHOW TRIGGERS

Ve bir trigger’ın oluşturma değerini almak için ise şu komutu kullanıyoruz;

SHOW CREATE TRIGGER trigger_adi

Zaten bu iki sorgu ile gerekli değerleri alıyoruz. Ancak videoda vurguladığım bir olay vardı. DELIMITER muhabbeti, onu videoya gözatarak anlayabilirsiniz.

Function’ları Almak

Aynı şekilde mysql function’ları almak içinde kolaylık sağlıyor. Function’ları listelemek için şu komutu kullanıyoruz;

SHOW FUNCTION STATUS WHERE Db = 'db_adi'

Burada diğerinden farklı olarak db adını belirttik. Çünkü diğer türlü diğer veritabanlarında olan functionlarda listelenebiliyor. Ve function oluşturma değerini almak için ise şu komutu kullanıyoruz;

SHOW CREATE FUNCTION function_adi

Procedure’leri Almak

Bu konuyu henüz sizlere anlatmasamda, eminim mysql tarafında procedure oluşturup kullananlarınız vardır. Bunlarında listesini almak için şu komutu kullanıyoruz;

SHOW PROCEDURE STATUS WHERE Db = 'db_adi'

Mevcut procedure’ün oluşturma değerini almak için ise şu komutu kullanıyoruz;

SHOW CREATE PROCEDURE procedure_adi

Evet bu komutları kullanarak bir mysql backup’ı almak çok kolay. Videoyu izleyip detaylarına ulaşabilirsiniz.

Klasör Yedeğini Almak

PHP tarafında belirttiğimiz dizinin alt dizinleri ve dosyalarıyla birlikte yedeğini alıp ZipArchive sınıfını kullanarak sıkıştırıp bir zip dosyasına getirme işleminde ilk olarak bir dizin listeleme fonksiyonu oluşturmalıyız. Buda recursive fonksiyon olmalı ki alt dizinleri ve onların dosyalarınıda alabilelim. Örnek bir recursive dizin listeleme fonksiyonu şöyle olabilir;

private function getDirectory($dir)
{
    static $files = [];
    foreach (glob($dir . '/*') as $file) {
        $notInclude = !in_array(str_replace($this->config['folder']['dir'] . '/', null, $file), $this->config['folder']['exclude']);
        if (
            is_dir($file) &&
            $notInclude
        ) {
            call_user_func([$this, 'getDirectory'], $file);
        } else {
            if ($notInclude)
                $files[] = $file;
        }
    }
    return $files;
}

Tabi biz bunu derste bir sınıf halinde yazdığımız için metod olarak tanımladık. Ve ek olarak listelemek istemediğimiz dosya ya da dizin varsa bunu exclude değerinde belirttik. Dosyaları listeleyip zip’e ekleme kısmı ise şöyleydi;

$files = $this->getDirectory($this->config['folder']['dir']);
$zip = new ZipArchive();
$zip->open($this->config['folder']['file'], ZipArchive::CREATE);
foreach ($files as $file) {
    $zip->addFile($file);
}
$zip->close();

Şimdi hepsini toparlayıp anlamak için videolara bakmanızı şiddetle tavsiye ediyorum. Ayrıca videoda hazırladığım sınıfı github’da paylaştım ki alıp geliştirebilin 🙂

Github Sayfası

Adını Backuphp olarak belirledim. P’leri birleştirdim 😀 Daha yaratıcı isimlere açığım. Olası hataları github üzerinden belirtirseniz geliştirmeye açığım. Sizde fork edip kendiniz geliştirebilirsiniz.

Github Linki: https://github.com/tayfunerbilen/backuphp

Github’ı kullanmıyorsanız hemen bir hesap açıp kullanmaya başlayın. Geliştirici olarak burayı ve buradaki gelişmeleri takip etmeniz sizin gelişiminiz açısından çok önemli arkadaşlar.

Yazımı burada sonlandırıyorum, sevgiyle kalın.

Composer Kurulumu ve Kullanımı (macOS & Windows)

PHP’de bağımlılıkları yüklemek için kullandığımız Bağımlılık ya da Paket Yöneticisi olarak adlandırdığımız Composer nasıl kurulur, nasıl kullanılır bunları öğreneceğiz.

macOS için Kurulumu

Terminalinizi açıp aşağıdaki kodları sırasıyla çalıştırın;

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

Bu kodla composer-setup.php dosyasını indirdik. Şimdi çalıştıralım;

php composer-setup.php

Composer kurulumu tamamlandı, indirdiğimiz php dosyasını silelim.

php -r "unlink('composer-setup.php');"

Şimdi yüklenip yüklenmediğini test etmek için;

php composer.phar --version

Burada eğer versiyon değeri dönüyorsa, bu iş tamamdır. Yalnız biz bunu global olarak kurup composer şeklinde kullanmak istiyoruz. Bunun için şu komutu çalıştıralım;

mv composer.phar /usr/local/bin/composer

Evet, artık şu şekilde kullanmaya hazırız;

composer --version

macOS için kurulum bu kadardı.

Windows için Kurulum

Windows’ta kurulumu exe dosyası indirerek yapıyoruz. Şu adrese girdikten sonra Composer-Setup.exe dosyasını indirin. Klasik next->next->next kurulumu. Sadece 2. aşamada php.exe yolunuzu belirtmeniz gerek. Hangi local programı kullanıyorsanız ona göre php’yi bulup php.exe’yi seçmeyi unutmayın.

Kurulum bitince cmd’yi çalıştırdığınızda ve şu komutu yazdığınızda versiyon değerini göreceksiniz;

composer --version

sonuç;

Composer Kullanımı

Bağımlılıkları yüklemek için şu komutu kullanıyoruz;

composer require paket_adi

Örnğein;

composer require phpmailer/phpmailer

Bu bize phpmailer paketini kuracaktır. Paket kurduğunuzda vendor adında bir klasör ve composer.json adında bir dosya göreceksiniz. vendor klasöründe kurduğunuz paketler yer alıyor. İçerisindeki autoload.phpdosyasını projenize dahil etmeniz paketleri kullanmanız için yeterli olacaktır.

composer.json dosyası ile hangi bağımlılıkları kuracağımızı belirtebiliriz. Örneğin;

{
    "name": "tayfunerbilen/test3",
    "description": "test",
    "require": {
        "phpmailer/phpmailer": "^6.0",
        "mgp25/instagram-php": "^5.0",
        "tayfunerbilen/basicdb": "dev-master"
    },
    "authors": [
        {
            "name": "tayfunerbilen",
            "email": "[email protected]"
        }
    ]
}

Ve composer.json dosyamız var ise, şu komut ile mevcut paketleri kurabiliriz.

composer install

ayrıca paketlerde yeni bir versiyon çıktığında güncellemek için şu komutu kullanabilirsiniz;

composer update

Not: Composer kullanımı için php.ini’de allow_url_fopen özelliğinin On değerinde olması gerekiyor.

Composer

Hepsi bu kadar, kullanmanız dileğiyle 🙂

Google PHP API ile Real Time Analytics Bilgilerini Almak

Merhaba arkadaşlar, Google’ın bize sunmuş olduğu beta olarak kullandığımız PHP API’yi kullanarak real time analytics bilgilerini nasıl alacağımızı öğreneceğiz. Hadi başlayalım.

1. Adım (Proje oluşturmak)

Öncelikle https://console.cloud.google.com adresine giriyoruz ve yeni proje oluştur diyerek bir isim belirleyip projemizi oluşturuyoruz.

Daha sonra sol menüden Kitaplık bölümüne giriyoruz. İlgili link: https://console.cloud.google.com/apis/library

Analytics diye aratıp Analytics API’yı buluyoruz ve içine girip aktif et diyoruz.

Aktif ettikten sonra yine sol menüden tekrardan Kimlik bilgileri kısmına giriyoruz. İlgili link: https://console.cloud.google.com/apis/credentials

Burada bir tane “Hizmet hesabı anahtarı” oluşturuyoruz.

Açılan sayfada yeni hizmet hesabı deyip bir hesap adı belirleyin. Ve alttaki anahtar türünün json olduğundan emin olun. Diğerlerine dokunmanıza gerek yok. Oluştur deyin, çıkan uyarıda da yine rolsüz oluştur deyin. Oluşturma işlemi bittiğinde bir json dosyası indirilecek otomatik olarak. Onu saklayın, çünkü google’ın cloud servislerine bağlanmak için onu kullanacaksınız.

Şimdi sol menüden IAM ve yönetici > Hizmet hesapları kısmına girin. Orada bir e-posta adresi göreceksiniz. Bu az önce hizmet hesabı oluştururken oluşan e-posta adresimiz. Onu kopyalayın ve bir sonraki adıma geçin.

2. Adım (Analytics Ayarları)

Şimdi Google Analytics’e girelim. Sol altta Admin ya da ayarlar simgesi var ona tıklayalım. Burada bir önceki adımda kopyaladığımız e-posta adresini üyeler kısmından eklememiz gerekiyor. Ayarlara girdiğinizde, view altındaki “User Management” kısmına tıklayın.

Ve buradan sağ üstteki + butonuna basıp add new user diyoruz. açılan sayfada kopyaladığımız e-posta adresini girip add diyoruz hepsi bu.

Son olarak hangi analytics hesabını kullanacaksanız, yine ayarlar bölümünde view altındaki “View Settings’e girin ve oradaki View ID’nizi kopyalayın, lazım olacak 🙂

3. Adım (Google PHP API Kurulumu & Kullanımı)

Google’ın beta olarak yayınladığı PHP API linki aşağıdadır.
https://github.com/googleapis/google-api-php-client

Şimdi zaten github sayfasında da anlatılıyor. Ya Composer ile kurun ya da son release edilen versiyonunu indirin diyor. Buna göre istediğiniz şekilde indirebilirsiniz. Her iki yoldada bir adet vendor klasörünüz olacak ve bunun içindeki autoload.php’yi sayfamıza dahil edeceğiz. Ayrıca json dosyası olarak indirdiğimiz dosyayıda projenize dahil edin. Şimdi gelelim asıl işi yapan kodlarımıza;

require __DIR__ . '/vendor/autoload.php';

$viewId = 'XXXX'; // sizin kopyaladığınız analytics id'niz

$client = new Google_Client();
$client->setAuthConfig(__DIR__ . '/sizindosyaniz.json');
$client->setScopes([
    'https://www.googleapis.com/auth/analytics.readonly'
]);

$analytics = new Google_Service_Analytics($client);

$result = $analytics->data_realtime->get(
    'ga:' . $viewId,
    'rt:activeVisitors',
    [
        'dimensions' => 'rt:pagePath,rt:country,rt:city,rt:longitude,rt:latitude'
    ]
);

$arr = [
    'online' => $result->getTotalResults(),
    'data' => $result->getRows()
];

echo json_encode($arr);

Bunun sonucunda aşağıdaki gibi bir sonuç elde edeceksiniz.

Artık istek attığınız zaman, anlık olarak o zamana ait güncel bilgileri çekebilirsiniz. Tabi PHP kullandığımız için sayfa yenilemeden anlık bilgileri güncelleme vs. yapamıyoruz. Ama en basit yöntem olan polling ajax yöntemini kullanabiliriz. Yani her 2-3 sn’de bir istek yapıp yeni bilgileri ekrana yazdırabiliriz. Bunun için şu şekilde bir kod yeterli;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        function getRealtimeData() {
            $.post('realtime-analytics.php', {}, function (response) {
                $('#online-users').text(response.online);
                $('#online-users-data').html('');
                $.each(response.data, function (key, val) {
                    $('#online-users-data').append('<li>' +
                        'Sayfa: ' + (val[0]) + ' <br> ' +
                        'Lokasyon: ' + (val[1] + '/' + val[2]) + '<br>' +
                        'Kaç Kişi: ' + (val[5]) +
                        '</li>');
                });
                console.log('çalıştı!');
            }, 'json');
        }

        getRealtimeData();
        setInterval(getRealtimeData, 1000);
    </script>
</head>
<body>

<div id="realtime-data">
    <h3>
        Online <span id="online-users"></span> kişi var
    </h3>
    <ul id="online-users-data"></ul>
</div>

</body>
</html>

Burada ben php işlemi yaptığım dosyamın adını realtime-analytics.phpolarak belirledim, siz kendinize göre düzeltirsiniz.

Hepsi bu kadar, umarım açıklayıcı olmuştur 🙂

PHP ile T.C. Kimlik No Doğrulama

Devletin bize verdiği SOAP servisi sayesinde, T.C. Kimlik Numarasının gerçekten doğru olup olmadığını kontrol edebiliyoruz. Bunuda PHP’de aşağıdaki şekilde kullanıyoruz. Burada dikkat edilmesi gereken gönderilen ad ve soyad’ın büyük harflerle yazılmasıdır. Aksi taktirde doğrulama işlemi çalışmamaktadır. Eğer bu TCKimlikNoDogrula metodu nereden çıktı, TCKimlikNoDogrulaResult property’sini nasıl elde ettik derseniz SoapClientile bağlandığımız yerden aldık bu bilgileri. Yani kafadan oluşturmadık 🙂

$client = new SoapClient("https://tckimlik.nvi.gov.tr/Service/KPSPublic.asmx?WSDL");
try {
    $result = $client->TCKimlikNoDogrula([
        'TCKimlikNo' => '5555555555',
        'Ad' => 'TAYFUN',
        'Soyad' => 'ERBİLEN',
        'DogumYili' => '1993'
    ]);
    if ($result->TCKimlikNoDogrulaResult) {
        echo 'T.C. Kimlik No Doğru';
    } else {
        echo 'T.C. Kimlik No Hatalı';
    }
} catch (Exception $e) {
    echo $e->faultstring;
}

Sıfırdan HTML Dersleri [Videolu]

Merhaba arkadaşlar, youtube kanalımda bir seriye başladım. Ve sıfırdan HTML dersleri paylaşıyorum. Html’i kullansakta ne kadar iyi bildiğimiz tartışılır, bu yüzden bilin ya da bilmeyin bu dersler mutlaka size bir şeyler katacaktır. Umarım yeni başlayanlar için faydalı, bilenler için ufuk açıcı dersler olur. Şimdiden hepinize iyi seyirler 🙂

Gulp ile İşlerinizi Kolaylaştırın

Merhaba arkadaşlar, front-end çalışmalarında gulp kullandığım şu dönemde bilmeyenler için bir makale yazmaya karar verdim. Öncelikle ne nedir bundan başlayalım ve neden kullanmamız gerek anlayalım.

Gulp nedir?

Gulp, geliştirme yaparken iş akışımızı yavaşlatan işlemleri otomatik yapmamızı sağlayan bir araçtır.

Gulp hangi durumlarda kullanılır?

CSS, HTML, JavaScript ya da Resim dosyalarınızla ilgili işlemler için kullanılabilir.

Ben kısaca CSS’de SASS ve LESS dosyalarımı çalıştırdım, minify ettim, tek dosya haline getirdim. Görselleri sıkıştırarak daha küçük boyut haline getirdim. HTML’leri herhangi bir template engine sisteminde otomatik çıkarttım. Javascript’te minify edip tüm js dosyalarını tek bir js dosyasına çevirdim. Ve bunları yaparken gulp dosyamı ayarladıktann sonra hiçbir şey yapmadım 🙂

Gulp nasıl kurulur?

Gulp, çalışması için node.js ve npm’in kurulu olması gerek. Öncelikle node.js’i sisteminize kurun. Daha sonra şu komutu çalıştırın;

npm install gulp-cli -g
npm install gulp -D

Burada -D aynı zamanda –save-dev değerine eşittir.

Gulp nasıl kullanılır?

Öncelikle dizininizde gulpfile.js adında bir dosya oluşturun. Gulp ile ilgili işlemleri bu dosya içinde yapacağız. Ancak gulp’ı tek başına kullanmak yetmiyor, başka paketlerde indirmeliyiz. Örneğin;

  • sass compiler için – gulp-sass
  • css minify için – gulp-csso
  • dosyaları birleştirmek için – gulp-concat
  • css’de tarayıcı versiyonuna göre prefix ekletmek için – gulp-autoprefixer
  • resim dosyalarını sıkıştırmak için – gulp-imagemin
  • javascript dosyalarını minify etmek için – gulp-uglify
  • dosyaları silmek için – del
  • html’i sıkıştırmak için – gulp-htmlmin
  • belli bir sırayla taskları başlatmak için – run-seqeuence
  • anlık olarak değişiklikleri görmek için – browser-sync

Bu paketleri tek tek isimleriyle şu şekilde kurabilirsiniz;

npm install --save-dev paket_adi

Burada --save-dev dememizin sebebi, bu paketlere sadece geliştirirken ihtiyacımız var, production’da ihtiyacımız olmadığından bu şekilde kuruyoruz.

Şimdi paketleri kurmadan önce bir tane package.json dosyası oluşturalım. Bunun için şu komutu çalıştıralım;

npm init

Daha sonra enter – enter diyerek sonuna kadar gidelim ve dosyamız oluşmuş olacak. Dosya oluştuktan sonra şunun gibi bir şe yolacak içeriği;

{
  "name": "erbilen-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Şimdi bunu neden oluşturduk birazdan anlayacağız. Dilerseniz artık paketleri kurabilirsiniz. Ya da package.json dosyanızı şu şekilde değiştirip;

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "run-sequence": "^2.2.1"
  }
}

Şu komutu çalıştırırsanız otomatik paketler kurulacaktır;

npm install

Paketlerin kurulması biraz zaman alır, kurulduğunda çalıştığınız dizine node_modules diye bir klasör gelecek. Tüm paketler bunun içinde yer alıyor.

Son olarak çalıştığımız klasör içerisinde dist ve src adında 2 klasör oluşturalım. dist burada projenin son hali, src ise sizin çalıştığınız versiyon olacak. Yani production ürünümüz dist içerisinde yer alacak.

Artık gulp’ı ve diğer paketleri beraberinde kullanmaya hazırız. Öncelikle kullanacağımız paketleri sayfamıza dahil edelim. gulpfile.js dosyamız şu şekilde olacak;

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const minifyImg = require('gulp-imagemin');
const minifyJS = require('gulp-uglify');
const minifyHTML = require('gulp-htmlmin');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');
const runSequence = require('run-sequence');

Ve artık tasklarımızı yazmaya başlayalım. Gulp’ta bir task oluşturmanın yolu şudur;

gulp.task('task_adi', () => {
    // işlemler
});

Bunu baz alarak browser-sync için ilk taskımızı oluşturalım.

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: "dist"
        }
    });
});

Burada baseDir yolunu dist olarak belirledik. Çünkü projemizin son hali orada yer alacak. Ve browser-sync bu klasörü bize serve ederek src altında herhangi bir html’de değişiklik olduğunda sayfayı reload edecek. Burada dikkat etmemiz gereken şey src/*.html yerine src/**/*.html yazmış olmamız. Bu src altındaki .html ile biten ve src altında herhangi bir klasör içinde .html ile biten tüm html dosyaları için geçerli olsun demek.

Şimdide CSS için taskımızı oluşturalım;

gulp.task('css', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass({
            outputStyle: 'nested',
            precision: 10,
            includePaths: ['.']
        }).on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(autoprefixer())
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Bu taskta sass’ı kullandık, minify ettik, prefixleri eklettik, concat ile tek dosyada birleştirip adını app.min.css koyduk, dest kısmına dist içindeki css klasörüne eklenecek dedik ve son olarak browser-sync kullandık. Bunuda watch ile işlem yaptığımızda anlayacaksınız.

Şimdide JS için taskımızı oluşturalım;

gulp.task('js', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(minifyJS())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

Bu taskta yine javascript dosyalarının yolunu belirttikten sonra concat ile tek dosya haline getirdik, uglify ile minift ettik ve dist içindeki js klasörüne çıkarttık. CSS’te olduğu gibi bunda da browser-sync işlemi yaptık.

Şimdide HTML için taskımızı oluşturalım;

gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(minifyHTML({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
});

Bu taskta da yine html dosyalarının yolunu belirttik, minify ettik ve dist içerisine çıkarttık. HTML’i minify etmek zorunda değilsiniz tabi, ben öyle can sıkıntısına ettim o ayrı 😀

Şimdide resimler için taskımızı oluşturalım;

gulp.task('img', () => {
    gulp.src('src/img/**/*')
        .pipe(minifyImg())
        .pipe(gulp.dest('dist/img'));
});

Bu taskta da yine resimlerin yolunu belirttik, minify ettik ve dist içindeki img klasörüne çıkarttık.

Şimdi ne olacak?

Şimdi tasklarımızı oluşturduk. Son 3 taskımız kaldı, bunlardan ilki gulp çalıştığında dist altındaki ilgili dosyaları silmesi için. İkincisi watch ile dosyaları izleyip bir değişiklik olduğunda ilgili taskları yeniden çalıştırmak için, ve son olarak runSequence kullanarak tasklarımızı sırayla çalıştırmak için;

gulp.task('delete', () => del(['dist/css', 'dist/js', 'dist/img', 'dist/**/*.html']));

gulp.task('watch', () => {
    gulp.watch("src/scss/**/*.scss", ['css']);
    gulp.watch("src/js/**/*.js", ['js']);
    gulp.watch("src/img/**/*", ['img']);
    gulp.watch("src/**/*.html", ['html']);
});

gulp.task('default', () => {
    runSequence(
        'delete',
        'html',
        'css',
        'js',
        'img',
        'browser-sync',
        'watch'
    );
});

İlk taskta css, js, img ve .html dosyalarını sildik. Burada ben özellikle belirttim hangileri olacağını, bazen font dosyası vs. atıyoruz dist içine oda silinmesin diye.

İkinci taskta gulp’ın watch özelliğini kullandık. Buda ilgili dosyaları izleyip bir değişiklik olduğunda belirlediğimiz taskları çalıştırmamızı sağlıyor. Hatırlarsanız css, js tasklarında browser-sync ile ilgili bir kod yazmıştık. İşte burada watch ile izlenip değişiklik olduğunda o task çalıştığında browser-sync’de sayfayı otomatik yenileyip değişiklikleri görmemizi sağlayacak.

Son taskımızın adı default, normalde gulp’ı çalıştırırken task adı belirtilmez ise otomatik olarak default taskı çalıştırılır. Bu yüzden adını bu şekilde koyduk. Bu taskta ise sırasıyla tasklarımız çalıştırıyoruz, yani önce delete taskı çalışıp dist içindeki herşeyi silecek, sonra html taskı çalışıp dist içine html dosyalarını atacak, daha sonra css, js, img. Ondan sonra browser-sync bize bir sunucu oluşturup dosyaları canlı olarak izlememize olanacak sağlayacak. Ve son olarak watch taskıda değişiklikleri takip edecek. Artık gulp’ı çalıştırmak için şunu yazmamız yeterli;

gulp

Sonuç şöyle olacak;

MacBooks-MacBook-Pro-2:frontend tayfunerbilen$ gulp
[00:18:12] Using gulpfile /Applications/MAMP/htdocs/frontend/gulpfile.js
[00:18:12] Starting 'default'...
[00:18:12] Starting 'delete'...
[00:18:12] Finished 'default' after 7.77 ms
[00:18:12] Finished 'delete' after 37 ms
[00:18:12] Starting 'html'...
[00:18:12] Finished 'html' after 16 ms
[00:18:12] Starting 'css'...
[00:18:12] Finished 'css' after 451 ms
[00:18:12] Starting 'js'...
[00:18:13] Finished 'js' after 1.4 s
[00:18:13] Starting 'img'...
[00:18:13] Finished 'img' after 1.55 ms
[00:18:13] Starting 'browser-sync'...
[00:18:14] Finished 'browser-sync' after 41 ms
[00:18:14] Starting 'watch'...
[00:18:14] Finished 'watch' after 178 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.21:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dist/
[00:18:44] gulp-imagemin: Minified 65 images (saved 200 kB - 5.9%)

Şimdi gördüğünüz gibi http://localhost:3000 üzerinden artık projemize ulaşabiliriz. Hatta http://192.168.1.21:3000 üzerinden aynı wifi’ye bağlı diğer cihazlardanda ulaşabiliriz. Böylece bir değişiklik olduğunda tüm cihazlardan aynı anda görebileceğiz.

Son hali

Yazdığım kodların son halini github sayfamda paylaştım. Eğer git kurulu ise;

git clone https://github.com/tayfunerbilen/frontend-gulp.git

diyerek indirebilirsiniz. Ya da şu linkten;
https://github.com/tayfunerbilen/frontend-gulp indirebilirsiniz.

İndirdikten sonra;

npm install
gulp

şeklinde kurup çalıştırabilirsiniz. Hepsi bu kadar 🙂 Kolaylıklar dilerim.