VPS'inizde Gulp.js ile Başlangıç: Otomasyonun Gücü Elinizde

VPS’inizde Gulp.js ile Başlangıç: Otomasyonun Gücü Elinizde

Giriş: Neden Gulp.js ve Neden VPS?

Modern web geliştirme süreçleri, tekrarlayan ve zaman alıcı birçok görevi içerir. Kodları birleştirmek (concatenation), sıkıştırmak (minification), ön işlemcileri (Sass, Less) derlemek, resimleri optimize etmek, tarayıcı uyumluluğu için prefix eklemek gibi işlemler, manuel olarak yapıldığında hem verimsizliğe yol açar hem de hata yapma olasılığını artırır. İşte bu noktada otomasyon araçları devreye girer. Gulp.js, bu otomasyon araçlarından biridir ve Node.js tabanlı, akışkan (stream-based) bir yapılandırma ile görevleri kolayca tanımlamanıza ve çalıştırmanıza olanak tanır.

Peki, neden Gulp.js’i bir Sanal Özel Sunucu (VPS) üzerinde kullanmayı düşünmelisiniz? Geliştirme süreçlerinin çoğu yerel makinelerde başlar, ancak projeler büyüdükçe veya birden fazla geliştiricinin çalıştığı bir ortamda, sürekli entegrasyon (CI) ve sürekli dağıtım (CD) süreçleri önem kazanır. Bir VPS, bu tür otomasyon görevlerini merkezi bir konumda, projenizin canlıya alınacağı ortama benzer bir altyapıda çalıştırmak için ideal bir platform sunar. Gulp.js’i bir VPS üzerinde yapılandırmak, proje derleme, test etme ve dağıtım süreçlerinizi otomatikleştirerek, geliştirme döngünüzü hızlandırır, tutarlılığı artırır ve hataları minimize eder. Bu makalede, Gulp.js’i VPS’inizde nasıl kuracağınızı, temel görevleri nasıl tanımlayacağınızı ve geliştirme iş akışınıza nasıl entegre edeceğinizi adım adım ele alacağız.

Gulp.js Nedir ve Neden Kullanmalıyız?

Gulp.js, geliştiricilerin tekrarlayan görevleri otomatikleştirmesine yardımcı olan bir JavaScript görev çalıştırıcısıdır (task runner). Diğer popüler görev çalıştırıcılarından (örneğin Grunt) farklı olarak, Gulp.js “kod üzerinden yapılandırma” yaklaşımını benimser ve Node.js’in akış (stream) yapısını kullanarak dosyalar üzerinde işlemler yapar. Bu yaklaşım, Gulp.js’i hem hızlı hem de esnek kılar.

Gulp.js’in Temel Özellikleri ve Avantajları

Kod Üzerinden Yapılandırma: Gulpfile.js, standart JavaScript kodları ile görevlerinizi tanımlamanıza olanak tanır. Bu, daha esnek ve okunabilir görevler yazmanızı sağlar.
Akış Tabanlı İşleme (Stream-based): Gulp, dosya sisteminde geçici dosyalar oluşturmak yerine, dosyaları bir boru hattından (pipeline) geçirerek işler. Bu, disk G/Ç (I/O) işlemlerini azaltır ve performansı artırır.
Hız: Akış tabanlı yapısı ve verimli eklenti mimarisi sayesinde Gulp, görevleri oldukça hızlı bir şekilde çalıştırabilir.
Basit ve Anlaşılır API: Gulp’ın API’si oldukça küçüktür ve öğrenmesi kolaydır. src(), dest(), pipe(), series(), parallel() gibi temel fonksiyonlarla güçlü görevler oluşturabilirsiniz.
Geniş Eklenti Ekosistemi: Gulp, binlerce eklentiye sahiptir. Bu eklentiler sayesinde Sass derleme, JavaScript sıkıştırma, resim optimizasyonu, tarayıcı senkronizasyonu gibi neredeyse her türlü geliştirme görevini otomatikleştirebilirsiniz.
Modülerlik: Her görev, kendi bağımsız işini yapar ve bu görevler birleştirilerek daha karmaşık iş akışları oluşturulabilir.

Gulp.js ile Neler Yapılabilir?

Gulp.js ile otomatikleştirebileceğiniz yaygın görevlerden bazıları şunlardır:

CSS ön işlemcilerini (Sass, Less, Stylus) derlemek.
CSS ve JavaScript dosyalarını birleştirmek ve sıkıştırmak.
JavaScript kodunu Babel ile eski tarayıcı uyumluluğu için dönüştürmek.
Resimleri optimize etmek ve boyutlarını küçültmek.
Tarayıcı önbellekleme sorunlarını çözmek için dosya versiyonlama (cache busting).
Tarayıcıda otomatik yenileme (Browser-Sync).
Dosya değişikliklerini izlemek ve ilgili görevleri otomatik çalıştırmak.
Unit testlerini çalıştırmak.
Uygulamayı uzak sunuculara (FTP/SFTP) dağıtmak.

Gulp.js, özellikle ön yüz geliştirme süreçlerinde geliştiricilere büyük zaman kazandırır ve projelerin daha düzenli, hatasız ve performanslı olmasını sağlar.

VPS Ortamının Hazırlanması

Gulp.js’i VPS’inizde kullanmaya başlamadan önce, sunucunuzun temel gereksinimleri karşıladığından emin olmanız gerekir. Bu bölümde, VPS seçimi, temel kurulum ve Gulp.js’in çalışması için gerekli olan Node.js ve npm’in kurulum adımlarını ele alacağız.

VPS Seçimi ve Temel Kurulum

VPS seçimi yaparken, projenizin ihtiyaç duyduğu kaynakları (CPU, RAM, depolama alanı) göz önünde bulundurmalısınız. Temel Gulp görevleri için çok yüksek kaynaklara ihtiyaç duyulmasa da, büyük projelerde veya eşzamanlı birçok görev çalıştırırken daha güçlü bir VPS tercih edilebilir. Popüler VPS sağlayıcıları arasında DigitalOcean, Vultr, Linode, AWS Lightsail ve Google Cloud Platform yer alır.

VPS’inizi seçip ilk kurulumu tamamladıktan sonra, SSH aracılığıyla sunucunuza bağlanmanız gerekecektir.

ssh kullanıcı_adı@vps_ip_adresi

Bağlandıktan sonra, sistem paketlerini güncelleyerek başlamak her zaman iyi bir uygulamadır:

sudo apt update
sudo apt upgrade -y

Bu komutlar, Ubuntu/Debian tabanlı sistemler içindir. CentOS/RHEL gibi farklı dağıtımlar için yum veya dnf gibi farklı paket yöneticileri kullanılır.

Node.js ve npm Kurulumu

Gulp.js, Node.js üzerinde çalıştığı için, VPS’inizde Node.js ve Node Paket Yöneticisi (npm) kurulu olmalıdır. Node.js’i kurmanın birkaç yolu vardır, ancak en önerilen yöntem Node Version Manager (NVM) kullanmaktır. NVM, farklı Node.js versiyonlarını kolayca yönetmenizi sağlar.

NVM Kurulumu

NVM’yi kurmak için aşağıdaki komutları kullanın:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Kurulum tamamlandıktan sonra, terminali kapatıp tekrar açın veya aşağıdaki komutu çalıştırarak NVM’yi oturumunuza yükleyin:

source ~/.bashrc # veya ~/.zshrc eğer zsh kullanıyorsanız

NVM’nin doğru yüklendiğini kontrol etmek için:

nvm --version

Node.js ve npm Kurulumu (NVM ile)

Şimdi NVM’yi kullanarak Node.js’in en son LTS (Uzun Süreli Destek) sürümünü kurabiliriz:

nvm install --lts
nvm use --lts

Kurulum tamamlandıktan sonra, Node.js ve npm’in versiyonlarını kontrol ederek doğru yüklendiğinden emin olun:

node -v
npm -v

Bu komutlar size kurulu Node.js ve npm versiyonlarını göstermelidir. Artık Gulp.js projenizi başlatmaya hazırsınız.

Gulp.js Projesine Başlangıç

VPS’inizde Node.js ve npm kurulu olduğuna göre, Gulp.js projenizi başlatma adımlarına geçebiliriz.

Proje Klasörünün Oluşturulması

Öncelikle, Gulp.js ile otomatikleştirmek istediğiniz projeniz için bir klasör oluşturun ve içine girin:

mkdir my-gulp-project
cd my-gulp-project

`package.json` Dosyasının Oluşturulması

Her Node.js projesi gibi, Gulp.js projeniz de bağımlılıkları ve proje meta verilerini yönetmek için bir package.json dosyasına ihtiyaç duyar. Bu dosyayı interaktif olarak oluşturmak için aşağıdaki komutu kullanın:

npm init -y

-y bayrağı, tüm varsayılan değerleri kabul ederek hızlıca bir package.json dosyası oluşturur. Daha sonra bu dosyayı düzenleyebilirsiniz.

Gulp CLI ve Gulp Paketinin Kurulumu

Gulp.js’i kullanmak için iki ana pakete ihtiyacımız var:

Gulp CLI (Command Line Interface): Gulp komutlarını terminalden çalıştırmamızı sağlayan global bir araçtır.
Gulp Paketi: Projenizin bağımlılığı olarak kurulan ve görevlerinizi tanımlamak için kullanılan ana Gulp kütüphanesidir.

Gulp CLI’ın Global Kurulumu

Gulp CLI’ı global olarak kurmak için:

npm install -g gulp-cli

Bu komutu bir kez çalıştırmanız yeterlidir. Artık gulp komutunu herhangi bir dizinden çalıştırabilirsiniz.

Gulp Paketinin Projeye Kurulumu

Şimdi Gulp paketini projenize yerel bir geliştirme bağımlılığı olarak kurun:

npm install --save-dev gulp

--save-dev bayrağı, Gulp’ı sadece geliştirme ortamında kullanılan bir bağımlılık olarak package.json dosyanızdaki devDependencies bölümüne ekler.

`gulpfile.js` Dosyasının Temel Yapısı

Gulp.js, tüm görev tanımlamalarını gulpfile.js adlı bir dosyada yapar. Bu dosyayı projenizin kök dizininde oluşturmanız gerekir:

touch gulpfile.js

Şimdi gulpfile.js dosyasını açın ve temel bir yapı ekleyin. Gulp 4’te görevler dışa aktarılır ve series() veya parallel() fonksiyonları ile birleştirilir.

// gulpfile.js

// Gulp'ı içe aktar
const { src, dest, watch, series, parallel } = require('gulp');

// Basit bir görev tanımlayalım
function helloTask(cb) {
    console.log('Merhaba Gulp!');
    cb(); // Görevin tamamlandığını belirtmek için callback çağrılır
}

// Varsayılan görevi tanımlayalım
// Terminalde 'gulp' komutu çalıştırıldığında bu görev çalışır
exports.default = series(helloTask);

// Veya belirli bir görevi dışa aktarıp adıyla çağırabilirsiniz:
// exports.hello = helloTask; // Terminalde 'gulp hello' ile çalışır

Yukarıdaki örnekte:
* require('gulp') ile Gulp modülünü içe aktarıyoruz. src, dest, watch, series, parallel gibi temel Gulp fonksiyonlarını doğrudan kullanmak için destructuring ataması yapıyoruz.
* helloTask adında basit bir JavaScript fonksiyonu tanımlıyoruz. Bu fonksiyon, konsola bir mesaj yazdırır.
* cb() fonksiyonu, Gulp’a görevin başarıyla tamamlandığını bildirmek için kullanılır. Bu, asenkron görevler için önemlidir.
* exports.default = series(helloTask); satırı, gulp komutu tek başına çalıştırıldığında helloTask‘ın çalışmasını sağlar. series() fonksiyonu görevleri sıralı olarak çalıştırır.

Şimdi bu temel görevi VPS’inizde çalıştırmayı deneyin:

gulp

Terminalde “Merhaba Gulp!” çıktısını görmelisiniz. Bu, Gulp’ın doğru bir şekilde kurulduğunu ve çalıştığını gösterir.

Temel Gulp Görevleri (Tasks) Oluşturma

Gulp.js’in gücü, çeşitli geliştirme görevlerini otomatikleştirebilmesinde yatar. Bu bölümde, web projelerinde sıkça kullanılan bazı temel Gulp görevlerini nasıl oluşturacağınızı adım adım göstereceğiz.

Basit Bir Görev: “Merhaba Gulp”

Yukarıda zaten bir “Merhaba Gulp” görevi tanımlamıştık. Bu, bir görevin temel yapısını anlamak için iyi bir başlangıç noktasıdır.

// gulpfile.js

const { src, dest, watch, series, parallel } = require('gulp');

function helloTask(cb) {
    console.log('Merhaba Gulp, VPS üzerinden!');
    cb();
}

exports.hello = helloTask; // 'gulp hello' ile çağrılır
exports.default = series(helloTask); // 'gulp' ile çağrılır

Bu görev, hiçbir dosya işlemi yapmaz, sadece bir mesajı konsola yazdırır. Asıl gücü, dosya sistemindeki değişiklikleri izleyerek veya dosyaları işleyerek ortaya çıkar.

CSS İşleme: Sass/Less Derleme ve Minify

Ön işlemciler (Sass, Less) kullanmak, CSS yazmayı çok daha verimli hale getirir. Gulp ile bu dosyaları derleyip, ardından sıkıştırabiliriz.

Gerekli Paketlerin Kurulumu

Sass derleme ve CSS sıkıştırma için aşağıdaki paketlere ihtiyacımız var:

npm install --save-dev gulp-sass sass gulp-postcss autoprefixer cssnano

* gulp-sass: Sass dosyalarını CSS’e derlemek için Gulp eklentisi.
* sass: Sass derleyicisinin kendisi.
* gulp-postcss: CSS dönüşümlerini gerçekleştirmek için bir Gulp eklentisi.
* autoprefixer: Tarayıcı öneklerini otomatik olarak ekler (örneğin, -webkit-, -moz-).
* cssnano: CSS dosyalarını sıkıştırmak ve optimize etmek için PostCSS eklentisi.

`gulpfile.js` İçin Görev Tanımlama

Şimdi gulpfile.js dosyamıza bu görevleri ekleyelim. Proje yapımızda src/scss klasöründe Sass dosyalarımızın olduğunu ve derlenmiş CSS’i dist/css klasörüne kaydetmek istediğimizi varsayalım.

// gulpfile.js devamı...

const sass = require('gulp-sass')(require('sass')); // gulp-sass v5+ için bu şekilde import edilir
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// CSS işleme görevi
function cssTask() {
    return src('src/scss//*.scss', { sourcemaps: true }) // Tüm .scss dosyalarını al
        .pipe(sass().on('error', sass.logError)) // Sass'ı derle, hataları logla
        .pipe(postcss([autoprefixer(), cssnano()])) // Autoprefixer ve cssnano uygula
        .pipe(dest('dist/css', { sourcemaps: '.' })); // Derlenmiş CSS'i dist/css'e kaydet
}

exports.css = cssTask; // 'gulp css' ile çağrılır

Bu görev, src/scss klasöründeki tüm .scss dosyalarını alır, Sass’a derler, PostCSS ile autoprefixer ve cssnano uygular ve son olarak dist/css klasörüne kaydeder. sourcemaps: true ile kaynak haritaları oluşturulur, bu da tarayıcıda hata ayıklama yaparken orijinal Sass dosyalarına geri dönmenizi sağlar.

JavaScript İşleme: Babel ile Dönüştürme ve Uglify

Modern JavaScript (ES6+) kullanmak yaygındır, ancak eski tarayıcılar bu söz dizimini desteklemeyebilir. Babel ile JavaScript’i eski tarayıcı uyumlu hale getirebiliriz. Ayrıca, dosyaları sıkıştırmak (uglify) da performans için önemlidir.

Gerekli Paketlerin Kurulumu

JavaScript dönüşümü ve sıkıştırma için aşağıdaki paketlere ihtiyacımız var:

npm install --save-dev gulp-babel @babel/core @babel/preset-env gulp-uglify

* gulp-babel: JavaScript kodunu Babel ile dönüştürmek için Gulp eklentisi.
* @babel/core: Babel’ın çekirdek kütüphanesi.
* @babel/preset-env: JavaScript’i hedef tarayıcı uyumluluğuna göre dönüştürmek için Babel ön ayarı.
* gulp-uglify: JavaScript dosyalarını sıkıştırmak için Gulp eklentisi.

`gulpfile.js` İçin Görev Tanımlama

Proje yapımızda src/js klasöründe JavaScript dosyalarımızın olduğunu ve işlenmiş JavaScript’i dist/js klasörüne kaydetmek istediğimizi varsayalım.

// gulpfile.js devamı...

const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// JavaScript işleme görevi
function jsTask() {
    return src('src/js//*.js', { sourcemaps: true })
        .pipe(babel({
            presets: ['@babel/env'] // ES6+ kodunu dönüştürmek için @babel/preset-env kullan
        }))
        .pipe(uglify()) // JavaScript'i sıkıştır
        .pipe(dest('dist/js', { sourcemaps: '.' }));
}

exports.js = jsTask; // 'gulp js' ile çağrılır

Bu görev, src/js klasöründeki tüm .js dosyalarını alır, Babel ile dönüştürür, uglify ile sıkıştırır ve dist/js klasörüne kaydeder.

Resim Optimizasyonu

Web sitelerinin performansında resim boyutları önemli bir rol oynar. Gulp ile resimleri optimize ederek boyutlarını küçültebiliriz.

Gerekli Paketlerin Kurulumu

Resim optimizasyonu için gulp-imagemin paketine ihtiyacımız var:

npm install --save-dev gulp-imagemin@7.1.0 # Veya en son versiyonu

gulp-imagemin v8 ve sonrası ES modülleri kullanır, bu da CommonJS tabanlı gulpfile.js için sorun çıkarabilir. Bu yüzden v7.1.0 kullanmak daha güvenli olabilir veya gulpfile.js‘i ES modülüne dönüştürmek gerekir. Bu örnekte CommonJS yapısını korumak adına v7.1.0 kullanılmıştır.

`gulpfile.js` İçin Görev Tanımlama

Proje yapımızda src/images klasöründe resimlerimizin olduğunu ve optimize edilmiş resimleri dist/images klasörüne kaydetmek istediğimizi varsayalım.

// gulpfile.js devamı...

const imagemin = require('gulp-imagemin');

// Resim optimizasyon görevi
function imgTask() {
    return src('src/images//*.{jpg,jpeg,png,gif,svg}') // Tüm resim dosyalarını al
        .pipe(imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.mozjpeg({ quality: 75, progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({
                plugins: [
                    { removeViewBox: true },
                    { cleanupIDs: false }
                ]
            })
        ])) // Resimleri optimize et
        .pipe(dest('dist/images')); // Optimize edilmiş resimleri dist/images'a kaydet
}

exports.img = imgTask; // 'gulp img' ile çağrılır

Bu görev, src/images klasöründeki çeşitli resim formatlarını optimize eder ve dist/images klasörüne kaydeder.

Dosya İzleme (Watching Files)

Geliştirme sürecinde, kaynak dosyalarınızda bir değişiklik olduğunda Gulp’ın ilgili görevleri otomatik olarak çalıştırmasını istersiniz. Bu, watch fonksiyonu ile yapılır.

// gulpfile.js devamı...

// Dosya izleme görevi
function watchTask() {
    watch('src/scss//*.scss', series(cssTask)); // SCSS dosyalarını izle, değişince cssTask'ı çalıştır
    watch('src/js//*.js', series(jsTask));     // JS dosyalarını izle, değişince jsTask'ı çalıştır
    watch('src/images//*.{jpg,jpeg,png,gif,svg}', series(imgTask)); // Resim dosyalarını izle
}

exports.watch = watchTask; // 'gulp watch' ile çağrılır

watch fonksiyonu iki ana argüman alır: izlenecek dosya yolu (glob deseni) ve değişiklik olduğunda çalıştırılacak görev(ler). series() kullanarak görevlerin sıralı çalışmasını sağlıyoruz.

Paralel ve Sıralı Görevler

Gulp’ta görevleri series() (sıralı) veya parallel() (paralel) olarak birleştirebilirsiniz.
* series(): Görevleri birbiri ardına, biri bitmeden diğerini başlatmadan çalıştırır. Örneğin, önce CSS’i derle, sonra JavaScript’i derle.
* parallel(): Görevleri eşzamanlı olarak çalıştırır. Örneğin, CSS ve JavaScript derleme görevleri birbirine bağımlı değilse, paralel çalıştırılarak zaman kazanılabilir.

Genel bir build görevi oluşturalım:

// gulpfile.js devamı...

// Genel build görevi: CSS, JS ve resimleri paralel olarak işler
const build = parallel(cssTask, jsTask, imgTask);

// Varsayılan görev: Önce build yap, sonra dosyaları izle
exports.default = series(build, watchTask);
exports.build = build; // 'gulp build' ile çağrılır

Artık gulp build komutunu çalıştırdığınızda, tüm CSS, JS ve resim optimizasyon görevleri paralel olarak çalışacaktır. gulp (varsayılan görev) komutu ise önce tüm dosyaları işleyecek, ardından değişiklikleri izlemeye başlayacaktır.

Gelişmiş Gulp Kullanımı ve Entegrasyonlar

Gulp.js’in temel görevlerini anladığımıza göre, şimdi daha karmaşık senaryoları ve entegrasyonları ele alalım.

Ortam Değişkenleri ve Koşullu Görevler

Geliştirme ve üretim ortamları arasında farklı Gulp davranışları isteyebilirsiniz. Örneğin, geliştirme ortamında kaynak haritaları (sourcemaps) istersiniz ama üretimde istemezsiniz. Bunu ortam değişkenleri ve koşullu mantıkla yönetebiliriz.

// gulpfile.js devamı...

const yargs = require('yargs');
const gulpiF = require('gulp-if');

// Komut satırı argümanlarını al
const argv = yargs.argv;
const isProduction = argv.production; // 'gulp --production' ile çalıştırıldığında true olur

// ... (Önceki görev tanımlamaları) ...

function cssTask() {
    return src('src/scss//*.scss', { sourcemaps: !isProduction }) // Üretimde sourcemap yok
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(dest('dist/css', { sourcemaps: !isProduction ? '.' : false })); // Üretimde sourcemap yok
}

function jsTask() {
    return src('src/js//*.js', { sourcemaps: !isProduction })
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulpiF(isProduction, uglify())) // Sadece üretimde uglify yap
        .pipe(dest('dist/js', { sourcemaps: !isProduction ? '.' : false }));
}

// ... (Diğer görevler) ...

// Komut satırı: 'gulp build --production' veya 'gulp --production'
// gulp-if paketi, koşullu olarak pipe'ları çalıştırmak için kullanılır.

yargs paketi, komut satırı argümanlarını kolayca ayrıştırmanıza olanak tanır. gulp-if ise belirli bir koşul doğruysa bir Gulp eklentisini çalıştırmanıza yarar.

FTP/SFTP ile Dağıtım (Deployment)

Gulp.js’i kullanarak projenizi doğrudan VPS’inize veya başka bir uzak sunucuya dağıtabilirsiniz. Bu, manuel FTP işlemlerini ortadan kaldırır.

Gerekli Paketlerin Kurulumu

FTP veya SFTP ile dağıtım için gulp-sftp veya gulp-ftp paketlerini kullanabilirsiniz. SFTP daha güvenli olduğu için onu tercih edelim.

npm install --save-dev gulp-sftp

`gulpfile.js` İçin Görev Tanımlama

Dağıtım görevini tanımlamak için sunucu bilgilerinizi (kullanıcı adı, şifre/anahtar, host, uzak dizin) kullanmanız gerekecektir. Bu bilgileri doğrudan gulpfile.js içine yazmak yerine, bir .env dosyası veya yapılandırma dosyası kullanmak daha güvenlidir.

// gulpfile.js devamı...

const sftp = require('gulp-sftp');
const dotenv = require('dotenv');

dotenv.config(); // .env dosyasını yükle

function deployTask() {
    return src('dist//*') // dist klasöründeki tüm dosyaları al
        .pipe(sftp({
            host: process.env.SFTP_HOST,
            user: process.env.SFTP_USER,
            pass: process.env.SFTP_PASSWORD, // Veya privateKey: fs.readFileSync('~/.ssh/id_rsa')
            remotePath: process.env.SFTP_REMOTE_PATH
        }));
}

exports.deploy = deployTask; // 'gulp deploy' ile çağrılır

.env dosyası oluşturun (örneğin, projenizin kök dizininde):

SFTP_HOST=your_vps_ip_address
SFTP_USER=your_username
SFTP_PASSWORD=your_password
SFTP_REMOTE_PATH=/var/www/html/your_project

npm install --save-dev dotenv ile dotenv paketini kurmayı unutmayın.
gulp deploy komutu çalıştırıldığında, dist klasöründeki tüm dosyalar VPS’inizdeki belirtilen uzak yola yüklenecektir.

Versiyonlama (Cache Busting)

Tarayıcı önbellekleme, web sitelerinin yüklenme hızını artırır, ancak güncellenmiş dosyaların eski sürümlerinin tarayıcıda kalmasına neden olabilir. Versiyonlama (cache busting), dosya adlarına benzersiz bir hash ekleyerek bu sorunu çözer.

Gerekli Paketlerin Kurulumu

Versiyonlama için gulp-rev ve gulp-rev-replace paketlerine ihtiyacımız var:

npm install --save-dev gulp-rev gulp-rev-replace

`gulpfile.js` İçin Görev Tanımlama

Bu görev genellikle CSS ve JS dosyaları işlendikten sonra çalıştırılır.

// gulpfile.js devamı...

const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');

// Versiyonlama görevi
function revTask() {
    return src(['dist//.css', 'dist//.js']) // CSS ve JS dosyalarını al
        .pipe(rev()) // Dosya adlarına hash ekle (örneğin, style.css -> style-abcdef12.css)
        .pipe(dest('dist')) // Yeni adlandırılmış dosyaları kaydet
        .pipe(rev.manifest()) // Manifest dosyasını oluştur (orijinal ad -> hash'li ad eşleşmeleri)
        .pipe(dest('dist')); // Manifest dosyasını dist klasörüne kaydet
}

// HTML'deki referansları güncelleme görevi
function revReplaceTask() {
    const manifest = src('dist/rev-manifest.json'); // Oluşturulan manifest dosyasını al

    return src('dist//*.html') // HTML dosyalarını al
        .pipe(revReplace({ manifest: manifest })) // Manifest'e göre referansları güncelle
        .pipe(dest('dist')); // Güncellenmiş HTML'i kaydet
}

exports.rev = series(revTask, revReplaceTask); // 'gulp rev' ile çağrılır

Bu görev, önce CSS ve JS dosyalarına hash ekler, ardından rev-manifest.json adında bir dosya oluşturur. Daha sonra revReplaceTask ile HTML dosyalarındaki bu CSS ve JS referanslarını günceller.

Gulp.js’i VPS’te Otomatikleştirmek

Gulp görevlerini manuel olarak çalıştırmak yerine, VPS’inizde otomatikleştirmenin birkaç yolu vardır. Bu, özellikle sürekli entegrasyon/dağıtım (CI/CD) iş akışları için önemlidir.

PM2 ile Arka Planda Çalıştırma

PM2, Node.js uygulamalarını üretim ortamında yönetmek için popüler bir süreç yöneticisidir. Gulp watch görevini veya tek seferlik bir build görevini arka planda çalıştırmak için kullanılabilir.

PM2 Kurulumu

PM2’yi global olarak kurun:

npm install -g pm2

Gulp Görevini PM2 ile Çalıştırma

Eğer Gulp’ın watch görevini sürekli olarak arka planda çalıştırmak isterseniz (örneğin, bir dosya sunucusunda değişiklikleri izlemek için):

cd /path/to/your/project
pm2 start gulp --name "my-gulp-watcher" -- watch

Bu komut, Gulp’ın watch görevini my-gulp-watcher adıyla bir PM2 süreci olarak başlatır.
Tek seferlik bir build görevini çalıştırmak ve bitince otomatik kapanmasını sağlamak için:

cd /path/to/your/project
pm2 start gulp --name "my-gulp-build" -- build --no-daemon --merge-logs --json --output /dev/null --error /dev/null
Veya daha basiti, sadece çalıştırmak ve logları görmek için:
pm2 start gulp --name "my-gulp-build" -- build
pm2 stop my-gulp-build # İş bitince durdur
pm2 delete my-gulp-build # Süreci sil

pm2 list ile çalışan süreçleri görebilirsiniz.
pm2 logs my-gulp-watcher ile logları takip edebilirsiniz.
pm2 startup komutu ile PM2’nin sunucu yeniden başladığında otomatik olarak başlamasını sağlayabilirsiniz.

CI/CD Entegrasyonu (Gitlab CI, Jenkins, Github Actions vb.)

Gulp’ı VPS’te çalıştırmanın en güçlü ve modern yolu, bir CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) boru hattına entegre etmektir. Bu, kodunuz bir Git deposuna itildiğinde otomatik olarak derleme, test ve dağıtım işlemlerini tetikler.

Temel mantık şöyledir:

Kodunuzu Git (GitHub, GitLab, Bitbucket vb.) deposuna gönderin.
CI/CD aracı (GitLab CI, GitHub Actions, Jenkins, Travis CI vb.) bu değişikliği algılar.
CI/CD aracı, VPS’inizde veya kendi konteynerinde bir “runner” (çalıştırıcı) başlatır.
Bu runner, projenizin deposunu klonlar.
Node.js ve npm bağımlılıklarını kurar (npm install).
Gulp build görevini çalıştırır (gulp build --production).
Başarılı olursa, dağıtım görevini çalıştırır (gulp deploy) veya derlenmiş dosyaları VPS’inize SSH/SFTP ile kopyalar.

Bu yöntem, her kod değişikliğinde projenizin otomatik olarak güncellenmesini ve dağıtılmasını sağlar, bu da insan hatasını azaltır ve geliştirme hızını artırır. Detaylı bir CI/CD kurulumu, kullanılan araca göre değişir ve bu makalenin kapsamını aşar, ancak Gulp görevlerinizin bu tür bir otomasyonun temelini oluşturduğunu unutmamak önemlidir. VPS’iniz, bu CI/CD sürecinin hedef sunucusu veya bazı durumlarda CI/CD runner’ı olarak görev yapabilir.

Sık Karşılaşılan Sorunlar ve Çözümleri

Gulp.js’i VPS’te kullanırken karşılaşabileceğiniz bazı yaygın sorunlar ve çözümleri:

gulp komutu bulunamıyor (command not found):
- gulp-cli‘ın global olarak yüklendiğinden emin olun: npm install -g gulp-cli.
- PATH ortam değişkeninizin, npm global paketlerinin bulunduğu dizini içerdiğinden emin olun. Genellikle NVM kullanıyorsanız bu sorun oluşmaz.
Node.js veya npm versiyon uyumsuzlukları:
- Farklı projeler farklı Node.js versiyonları gerektirebilir. NVM kullanarak projeye özel Node.js versiyonunu ayarlayın: nvm use .
- package.json dosyanızdaki bağımlılıkların doğru versiyonlarda olduğundan emin olun ve npm install komutunu tekrar çalıştırın.
Dosya izinleri sorunları:
- Gulp, derlenmiş dosyaları kaydederken veya okurken izin sorunlarıyla karşılaşabilir. Hedef klasörlerin (dist, log vb.) doğru yazma izinlerine sahip olduğundan emin olun. chmod -R 775 /path/to/your/dist veya chown -R user:group /path/to/your/dist komutlarını kullanabilirsiniz.
- sudo ile npm paketleri kurmaktan kaçının. Bu, izin sorunlarına yol açabilir. NVM kullanmak bu tür sorunları önler.
Gulp görevleri çalışmıyor veya hatalı çıktı veriyor:
- gulpfile.js dosyanızdaki söz dizimi hatalarını kontrol edin.
- Gulp eklentilerinin doğru şekilde içe aktarıldığından (require) ve doğru parametrelerle çağrıldığından emin olun.
- Gulp eklentilerinin güncel versiyonlarını kullandığınızdan ve birbirleriyle uyumlu olduğundan emin olun. Bazen eski bir eklenti, yeni bir Gulp sürümüyle sorun çıkarabilir.
- console.log() ile görevlerinizin ara adımlarını inceleyerek hata ayıklama yapın.
Performans sorunları (uzun süren görevler):
- Büyük projelerde, src() ve dest() işlemlerinin çok fazla dosya G/Ç yapmadığından emin olun. Akış tabanlı yapıyı doğru kullanın.
- parallel() kullanarak bağımsız görevleri eşzamanlı çalıştırın.
- Gereksiz eklentileri veya görevleri kaldırmak, performansı artırabilir.
- VPS kaynaklarınızın (CPU, RAM) yeterli olduğundan emin olun.

Sonuç ve İleri Adımlar

Bu makalede, Gulp.js’in ne olduğunu, neden kullanılması gerektiğini ve VPS ortamında nasıl kurulup yapılandırılacağını detaylı bir şekilde ele aldık. Temel CSS, JavaScript ve resim optimizasyon görevlerinden başlayarak, dosya izleme, paralel/sıralı görevler, ortam değişkenleri ile koşullu çalıştırma, dağıtım ve versiyonlama gibi daha gelişmiş konulara değindik. Son olarak, Gulp görevlerinizi PM2 ile arka planda çalıştırma ve CI/CD süreçlerine entegre etme yöntemlerini inceledik.

Gulp.js, geliştirme süreçlerinizi otomatikleştirmek, verimliliği artırmak ve hata oranını düşürmek için güçlü bir araçtır. VPS üzerinde Gulp’ı kullanmak, özellikle sürekli entegrasyon ve dağıtım iş akışlarınızda merkezi bir otomasyon noktası sağlar.

İleri Adımlar

Daha Fazla Gulp Eklentisi Keşfedin: İhtiyaçlarınıza uygun yüzlerce Gulp eklentisi mevcuttur. Gulp’ın resmi web sitesindeki eklenti listesini inceleyerek yeni araçlar keşfedin.
CI/CD Boru Hattı Kurun: GitHub Actions, GitLab CI, Jenkins veya başka bir CI/CD aracı kullanarak Gulp görevlerinizi otomatikleştirin. Bu, kod değişikliklerinizle birlikte projenizin otomatik olarak derlenmesini ve dağıtılmasını sağlayacaktır.
Test Otomasyonu Entegrasyonu: Unit testlerinizi veya entegrasyon testlerinizi Gulp görevlerinize entegre ederek, kodunuzun kalitesini otomatik olarak kontrol edin.
Gelişmiş Hata Yönetimi: Gulp görevlerinizde daha sağlam hata yönetimi mekanizmaları (örneğin, gulp-plumber gibi eklentilerle) kullanarak, bir hata durumunda görevin tamamen durmasını engelleyin.
Yapılandırmayı Soyutlama: Büyük projelerde, gulpfile.js dosyanız çok büyüyebilir. Görevleri ayrı dosyalara bölerek veya bir yapılandırma objesi kullanarak Gulpfile’ınızı daha düzenli hale getirin.

Gulp.js ile otomasyon dünyasına adım attınız. Bu güçlü aracı ustaca kullanarak, geliştirme süreçlerinizi optimize edebilir ve projelerinizi daha hızlı ve güvenilir bir şekilde canlıya alabilirsiniz. Başarılar dileriz!

VPS’inizde Gulp.js ile Başlangıç: Otomasyonun Gücü Elinizde