Modern web geli\u015ftirme s\u00fcre\u00e7leri, tekrarlayan ve zaman al\u0131c\u0131 bir\u00e7ok g\u00f6revi i\u00e7erir. Kodlar\u0131 birle\u015ftirmek (concatenation), s\u0131k\u0131\u015ft\u0131rmak (minification), \u00f6n i\u015flemcileri (Sass, Less) derlemek, resimleri optimize etmek, taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in prefix eklemek gibi i\u015flemler, manuel olarak yap\u0131ld\u0131\u011f\u0131nda hem verimsizli\u011fe yol a\u00e7ar hem de hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. \u0130\u015fte bu noktada otomasyon ara\u00e7lar\u0131 devreye girer. Gulp.js, bu otomasyon ara\u00e7lar\u0131ndan biridir ve Node.js tabanl\u0131, ak\u0131\u015fkan (stream-based) bir yap\u0131land\u0131rma ile g\u00f6revleri kolayca tan\u0131mlaman\u0131za ve \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.<\/p>\n
Peki, neden Gulp.js’i bir Sanal \u00d6zel Sunucu (VPS) \u00fczerinde kullanmay\u0131 d\u00fc\u015f\u00fcnmelisiniz? Geli\u015ftirme s\u00fcre\u00e7lerinin \u00e7o\u011fu yerel makinelerde ba\u015flar, ancak projeler b\u00fcy\u00fcd\u00fck\u00e7e veya birden fazla geli\u015ftiricinin \u00e7al\u0131\u015ft\u0131\u011f\u0131 bir ortamda, s\u00fcrekli entegrasyon (CI) ve s\u00fcrekli da\u011f\u0131t\u0131m (CD) s\u00fcre\u00e7leri \u00f6nem kazan\u0131r. Bir VPS, bu t\u00fcr otomasyon g\u00f6revlerini merkezi bir konumda, projenizin canl\u0131ya al\u0131naca\u011f\u0131 ortama benzer bir altyap\u0131da \u00e7al\u0131\u015ft\u0131rmak i\u00e7in ideal bir platform sunar. Gulp.js’i bir VPS \u00fczerinde yap\u0131land\u0131rmak, proje derleme, test etme ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerinizi otomatikle\u015ftirerek, geli\u015ftirme d\u00f6ng\u00fcn\u00fcz\u00fc h\u0131zland\u0131r\u0131r, tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r ve hatalar\u0131 minimize eder. Bu makalede, Gulp.js’i VPS’inizde nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, temel g\u00f6revleri nas\u0131l tan\u0131mlayaca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131za nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n
Gulp.js, geli\u015ftiricilerin tekrarlayan g\u00f6revleri otomatikle\u015ftirmesine yard\u0131mc\u0131 olan bir JavaScript g\u00f6rev \u00e7al\u0131\u015ft\u0131r\u0131c\u0131s\u0131d\u0131r (task runner). Di\u011fer pop\u00fcler g\u00f6rev \u00e7al\u0131\u015ft\u0131r\u0131c\u0131lar\u0131ndan (\u00f6rne\u011fin Grunt) farkl\u0131 olarak, Gulp.js “kod \u00fczerinden yap\u0131land\u0131rma” yakla\u015f\u0131m\u0131n\u0131 benimser ve Node.js’in ak\u0131\u015f (stream) yap\u0131s\u0131n\u0131 kullanarak dosyalar \u00fczerinde i\u015flemler yapar. Bu yakla\u015f\u0131m, Gulp.js’i hem h\u0131zl\u0131 hem de esnek k\u0131lar.<\/p>\n
src()<\/code>, dest()<\/code>, pipe()<\/code>, series()<\/code>, parallel()<\/code> gibi temel fonksiyonlarla g\u00fc\u00e7l\u00fc g\u00f6revler olu\u015fturabilirsiniz.\n <\/li>\n- \n Geni\u015f Eklenti Ekosistemi:<\/strong> Gulp, binlerce eklentiye sahiptir. Bu eklentiler sayesinde Sass derleme, JavaScript s\u0131k\u0131\u015ft\u0131rma, resim optimizasyonu, taray\u0131c\u0131 senkronizasyonu gibi neredeyse her t\u00fcrl\u00fc geli\u015ftirme g\u00f6revini otomatikle\u015ftirebilirsiniz.\n <\/li>\n
- \n Mod\u00fclerlik:<\/strong> Her g\u00f6rev, kendi ba\u011f\u0131ms\u0131z i\u015fini yapar ve bu g\u00f6revler birle\u015ftirilerek daha karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131 olu\u015fturulabilir.\n <\/li>\n<\/ul>\n
Gulp.js ile Neler Yap\u0131labilir?<\/h3>\n
Gulp.js ile otomatikle\u015ftirebilece\u011finiz yayg\u0131n g\u00f6revlerden baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n
\n- CSS \u00f6n i\u015flemcilerini (Sass, Less, Stylus) derlemek.<\/li>\n
- CSS ve JavaScript dosyalar\u0131n\u0131 birle\u015ftirmek ve s\u0131k\u0131\u015ft\u0131rmak.<\/li>\n
- JavaScript kodunu Babel ile eski taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in d\u00f6n\u00fc\u015ft\u00fcrmek.<\/li>\n
- Resimleri optimize etmek ve boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek.<\/li>\n
- Taray\u0131c\u0131 \u00f6nbellekleme sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in dosya versiyonlama (cache busting).<\/li>\n
- Taray\u0131c\u0131da otomatik yenileme (Browser-Sync).<\/li>\n
- Dosya de\u011fi\u015fikliklerini izlemek ve ilgili g\u00f6revleri otomatik \u00e7al\u0131\u015ft\u0131rmak.<\/li>\n
- Unit testlerini \u00e7al\u0131\u015ft\u0131rmak.<\/li>\n
- Uygulamay\u0131 uzak sunuculara (FTP\/SFTP) da\u011f\u0131tmak.<\/li>\n<\/ul>\n
Gulp.js, \u00f6zellikle \u00f6n y\u00fcz geli\u015ftirme s\u00fcre\u00e7lerinde geli\u015ftiricilere b\u00fcy\u00fck zaman kazand\u0131r\u0131r ve projelerin daha d\u00fczenli, hatas\u0131z ve performansl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n
VPS Ortam\u0131n\u0131n Haz\u0131rlanmas\u0131<\/h2>\n
Gulp.js’i VPS’inizde kullanmaya ba\u015flamadan \u00f6nce, sunucunuzun temel gereksinimleri kar\u015f\u0131lad\u0131\u011f\u0131ndan emin olman\u0131z gerekir. Bu b\u00f6l\u00fcmde, VPS se\u00e7imi, temel kurulum ve Gulp.js’in \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli olan Node.js ve npm’in kurulum ad\u0131mlar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n
VPS Se\u00e7imi ve Temel Kurulum<\/h3>\n
VPS se\u00e7imi yaparken, projenizin ihtiya\u00e7 duydu\u011fu kaynaklar\u0131 (CPU, RAM, depolama alan\u0131) g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131s\u0131n\u0131z. Temel Gulp g\u00f6revleri i\u00e7in \u00e7ok y\u00fcksek kaynaklara ihtiya\u00e7 duyulmasa da, b\u00fcy\u00fck projelerde veya e\u015fzamanl\u0131 bir\u00e7ok g\u00f6rev \u00e7al\u0131\u015ft\u0131r\u0131rken daha g\u00fc\u00e7l\u00fc bir VPS tercih edilebilir. Pop\u00fcler VPS sa\u011flay\u0131c\u0131lar\u0131 aras\u0131nda DigitalOcean, Vultr, Linode, AWS Lightsail ve Google Cloud Platform yer al\u0131r.<\/p>\n
VPS’inizi se\u00e7ip ilk kurulumu tamamlad\u0131ktan sonra, SSH arac\u0131l\u0131\u011f\u0131yla sunucunuza ba\u011flanman\u0131z gerekecektir.<\/p>\n
ssh kullan\u0131c\u0131_ad\u0131@vps_ip_adresi<\/code><\/pre>\nBa\u011fland\u0131ktan sonra, sistem paketlerini g\u00fcncelleyerek ba\u015flamak her zaman iyi bir uygulamad\u0131r:<\/p>\n
sudo apt update\nsudo apt upgrade -y<\/code><\/pre>\nBu komutlar, Ubuntu\/Debian tabanl\u0131 sistemler i\u00e7indir. CentOS\/RHEL gibi farkl\u0131 da\u011f\u0131t\u0131mlar i\u00e7in yum<\/code> veya dnf<\/code> gibi farkl\u0131 paket y\u00f6neticileri kullan\u0131l\u0131r.<\/p>\nNode.js ve npm Kurulumu<\/h3>\n
Gulp.js, Node.js \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, VPS’inizde Node.js ve Node Paket Y\u00f6neticisi (npm) kurulu olmal\u0131d\u0131r. Node.js’i kurman\u0131n birka\u00e7 yolu vard\u0131r, ancak en \u00f6nerilen y\u00f6ntem Node Version Manager (NVM) kullanmakt\u0131r. NVM, farkl\u0131 Node.js versiyonlar\u0131n\u0131 kolayca y\u00f6netmenizi sa\u011flar.<\/p>\n
NVM Kurulumu<\/h4>\n
NVM’yi kurmak i\u00e7in a\u015fa\u011f\u0131daki komutlar\u0131 kullan\u0131n:<\/p>\n
curl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.1\/install.sh | bash<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, terminali kapat\u0131p tekrar a\u00e7\u0131n veya a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak NVM’yi oturumunuza y\u00fckleyin:<\/p>\n
source ~\/.bashrc # veya ~\/.zshrc e\u011fer zsh kullan\u0131yorsan\u0131z<\/code><\/pre>\nNVM’nin do\u011fru y\u00fcklendi\u011fini kontrol etmek i\u00e7in:<\/p>\n
nvm --version<\/code><\/pre>\nNode.js ve npm Kurulumu (NVM ile)<\/h4>\n
\u015eimdi NVM’yi kullanarak Node.js’in en son LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc kurabiliriz:<\/p>\n
nvm install --lts\nnvm use --lts<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, Node.js ve npm’in versiyonlar\u0131n\u0131 kontrol ederek do\u011fru y\u00fcklendi\u011finden emin olun:<\/p>\n
node -v\nnpm -v<\/code><\/pre>\nBu komutlar size kurulu Node.js ve npm versiyonlar\u0131n\u0131 g\u00f6stermelidir. Art\u0131k Gulp.js projenizi ba\u015flatmaya haz\u0131rs\u0131n\u0131z.<\/p>\n
Gulp.js Projesine Ba\u015flang\u0131\u00e7<\/h2>\n
VPS’inizde Node.js ve npm kurulu oldu\u011funa g\u00f6re, Gulp.js projenizi ba\u015flatma ad\u0131mlar\u0131na ge\u00e7ebiliriz.<\/p>\n
Proje Klas\u00f6r\u00fcn\u00fcn Olu\u015fturulmas\u0131<\/h3>\n
\u00d6ncelikle, Gulp.js ile otomatikle\u015ftirmek istedi\u011finiz projeniz i\u00e7in bir klas\u00f6r olu\u015fturun ve i\u00e7ine girin:<\/p>\n
mkdir my-gulp-project\ncd my-gulp-project<\/code><\/pre>\npackage.json<\/code> Dosyas\u0131n\u0131n Olu\u015fturulmas\u0131<\/h3>\nHer Node.js projesi gibi, Gulp.js projeniz de ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve proje meta verilerini y\u00f6netmek i\u00e7in bir package.json<\/code> dosyas\u0131na ihtiya\u00e7 duyar. Bu dosyay\u0131 interaktif olarak olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullan\u0131n:<\/p>\nnpm init -y<\/code><\/pre>\n-y<\/code> bayra\u011f\u0131, t\u00fcm varsay\u0131lan de\u011ferleri kabul ederek h\u0131zl\u0131ca bir package.json<\/code> dosyas\u0131 olu\u015fturur. Daha sonra bu dosyay\u0131 d\u00fczenleyebilirsiniz.<\/p>\nGulp CLI ve Gulp Paketinin Kurulumu<\/h3>\n
Gulp.js’i kullanmak i\u00e7in iki ana pakete ihtiyac\u0131m\u0131z var:<\/p>\n
\n- \n Gulp CLI (Command Line Interface):<\/strong> Gulp komutlar\u0131n\u0131 terminalden \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flayan global bir ara\u00e7t\u0131r.\n <\/li>\n
- \n Gulp Paketi:<\/strong> Projenizin ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurulan ve g\u00f6revlerinizi tan\u0131mlamak i\u00e7in kullan\u0131lan ana Gulp k\u00fct\u00fcphanesidir.\n <\/li>\n<\/ol>\n
Gulp CLI’\u0131n Global Kurulumu<\/h4>\n
Gulp CLI’\u0131 global olarak kurmak i\u00e7in:<\/p>\n
npm install -g gulp-cli<\/code><\/pre>\nBu komutu bir kez \u00e7al\u0131\u015ft\u0131rman\u0131z yeterlidir. Art\u0131k gulp<\/code> komutunu herhangi bir dizinden \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\nGulp Paketinin Projeye Kurulumu<\/h4>\n
\u015eimdi Gulp paketini projenize yerel bir geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurun:<\/p>\n
npm install --save-dev gulp<\/code><\/pre>\n--save-dev<\/code> bayra\u011f\u0131, Gulp’\u0131 sadece geli\u015ftirme ortam\u0131nda kullan\u0131lan bir ba\u011f\u0131ml\u0131l\u0131k olarak package.json<\/code> dosyan\u0131zdaki devDependencies<\/code> b\u00f6l\u00fcm\u00fcne ekler.<\/p>\ngulpfile.js<\/code> Dosyas\u0131n\u0131n Temel Yap\u0131s\u0131<\/h3>\nGulp.js, t\u00fcm g\u00f6rev tan\u0131mlamalar\u0131n\u0131 gulpfile.js<\/code> adl\u0131 bir dosyada yapar. Bu dosyay\u0131 projenizin k\u00f6k dizininde olu\u015fturman\u0131z gerekir:<\/p>\ntouch gulpfile.js<\/code><\/pre>\n\u015eimdi gulpfile.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve temel bir yap\u0131 ekleyin. Gulp 4’te g\u00f6revler d\u0131\u015fa aktar\u0131l\u0131r ve series()<\/code> veya parallel()<\/code> fonksiyonlar\u0131 ile birle\u015ftirilir.<\/p>\n\/\/ gulpfile.js\n\n\/\/ Gulp'\u0131 i\u00e7e aktar\nconst { src, dest, watch, series, parallel } = require('gulp');\n\n\/\/ Basit bir g\u00f6rev tan\u0131mlayal\u0131m\nfunction helloTask(cb) {\n console.log('Merhaba Gulp!');\n cb(); \/\/ G\u00f6revin tamamland\u0131\u011f\u0131n\u0131 belirtmek i\u00e7in callback \u00e7a\u011fr\u0131l\u0131r\n}\n\n\/\/ Varsay\u0131lan g\u00f6revi tan\u0131mlayal\u0131m\n\/\/ Terminalde 'gulp' komutu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda bu g\u00f6rev \u00e7al\u0131\u015f\u0131r\nexports.default = series(helloTask);\n\n\/\/ Veya belirli bir g\u00f6revi d\u0131\u015fa aktar\u0131p ad\u0131yla \u00e7a\u011f\u0131rabilirsiniz:\n\/\/ exports.hello = helloTask; \/\/ Terminalde 'gulp hello' ile \u00e7al\u0131\u015f\u0131r<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte:
\n* require('gulp')<\/code> ile Gulp mod\u00fcl\u00fcn\u00fc i\u00e7e aktar\u0131yoruz. src<\/code>, dest<\/code>, watch<\/code>, series<\/code>, parallel<\/code> gibi temel Gulp fonksiyonlar\u0131n\u0131 do\u011frudan kullanmak i\u00e7in destructuring atamas\u0131 yap\u0131yoruz.
\n* helloTask<\/code> ad\u0131nda basit bir JavaScript fonksiyonu tan\u0131ml\u0131yoruz. Bu fonksiyon, konsola bir mesaj yazd\u0131r\u0131r.
\n* cb()<\/code> fonksiyonu, Gulp’a g\u00f6revin ba\u015far\u0131yla tamamland\u0131\u011f\u0131n\u0131 bildirmek i\u00e7in kullan\u0131l\u0131r. Bu, asenkron g\u00f6revler i\u00e7in \u00f6nemlidir.
\n* exports.default = series(helloTask);<\/code> sat\u0131r\u0131, gulp<\/code> komutu tek ba\u015f\u0131na \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda helloTask<\/code>‘\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. series()<\/code> fonksiyonu g\u00f6revleri s\u0131ral\u0131 olarak \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n\u015eimdi bu temel g\u00f6revi VPS’inizde \u00e7al\u0131\u015ft\u0131rmay\u0131 deneyin:<\/p>\n
gulp<\/code><\/pre>\nTerminalde “Merhaba Gulp!” \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6rmelisiniz. Bu, Gulp’\u0131n do\u011fru bir \u015fekilde kuruldu\u011funu ve \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/p>\n
Temel Gulp G\u00f6revleri (Tasks) Olu\u015fturma<\/h2>\n
Gulp.js’in g\u00fcc\u00fc, \u00e7e\u015fitli geli\u015ftirme g\u00f6revlerini otomatikle\u015ftirebilmesinde yatar. Bu b\u00f6l\u00fcmde, web projelerinde s\u0131k\u00e7a kullan\u0131lan baz\u0131 temel Gulp g\u00f6revlerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fiz.<\/p>\n
Basit Bir G\u00f6rev: “Merhaba Gulp”<\/h3>\n
Yukar\u0131da zaten bir “Merhaba Gulp” g\u00f6revi tan\u0131mlam\u0131\u015ft\u0131k. Bu, bir g\u00f6revin temel yap\u0131s\u0131n\u0131 anlamak i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
\/\/ gulpfile.js\n\nconst { src, dest, watch, series, parallel } = require('gulp');\n\nfunction helloTask(cb) {\n console.log('Merhaba Gulp, VPS \u00fczerinden!');\n cb();\n}\n\nexports.hello = helloTask; \/\/ 'gulp hello' ile \u00e7a\u011fr\u0131l\u0131r\nexports.default = series(helloTask); \/\/ 'gulp' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nBu g\u00f6rev, hi\u00e7bir dosya i\u015flemi yapmaz, sadece bir mesaj\u0131 konsola yazd\u0131r\u0131r. As\u0131l g\u00fcc\u00fc, dosya sistemindeki de\u011fi\u015fiklikleri izleyerek veya dosyalar\u0131 i\u015fleyerek ortaya \u00e7\u0131kar.<\/p>\n
CSS \u0130\u015fleme: Sass\/Less Derleme ve Minify<\/h3>\n
\u00d6n i\u015flemciler (Sass, Less) kullanmak, CSS yazmay\u0131 \u00e7ok daha verimli hale getirir. Gulp ile bu dosyalar\u0131 derleyip, ard\u0131ndan s\u0131k\u0131\u015ft\u0131rabiliriz.<\/p>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
Sass derleme ve CSS s\u0131k\u0131\u015ft\u0131rma i\u00e7in a\u015fa\u011f\u0131daki paketlere ihtiyac\u0131m\u0131z var:<\/p>\n
npm install --save-dev gulp-sass sass gulp-postcss autoprefixer cssnano<\/code><\/pre>\n* gulp-sass<\/code>: Sass dosyalar\u0131n\u0131 CSS’e derlemek i\u00e7in Gulp eklentisi.
\n* sass<\/code>: Sass derleyicisinin kendisi.
\n* gulp-postcss<\/code>: CSS d\u00f6n\u00fc\u015f\u00fcmlerini ger\u00e7ekle\u015ftirmek i\u00e7in bir Gulp eklentisi.
\n* autoprefixer<\/code>: Taray\u0131c\u0131 \u00f6neklerini otomatik olarak ekler (\u00f6rne\u011fin, -webkit-<\/code>, -moz-<\/code>).
\n* cssnano<\/code>: CSS dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rmak ve optimize etmek i\u00e7in PostCSS eklentisi.<\/p>\ngulpfile.js<\/code> \u0130\u00e7in G\u00f6rev Tan\u0131mlama<\/h4>\n\u015eimdi gulpfile.js<\/code> dosyam\u0131za bu g\u00f6revleri ekleyelim. Proje yap\u0131m\u0131zda src\/scss<\/code> klas\u00f6r\u00fcnde Sass dosyalar\u0131m\u0131z\u0131n oldu\u011funu ve derlenmi\u015f CSS’i dist\/css<\/code> klas\u00f6r\u00fcne kaydetmek istedi\u011fimizi varsayal\u0131m.<\/p>\n\/\/ gulpfile.js devam\u0131...\n\nconst sass = require('gulp-sass')(require('sass')); \/\/ gulp-sass v5+ i\u00e7in bu \u015fekilde import edilir\nconst postcss = require('gulp-postcss');\nconst autoprefixer = require('autoprefixer');\nconst cssnano = require('cssnano');\n\n\/\/ CSS i\u015fleme g\u00f6revi\nfunction cssTask() {\n return src('src\/scss\/<\/em>\/*.scss', { sourcemaps: true }) \/\/ T\u00fcm .scss dosyalar\u0131n\u0131 al\n .pipe(sass().on('error', sass.logError)) \/\/ Sass'\u0131 derle, hatalar\u0131 logla\n .pipe(postcss([autoprefixer(), cssnano()])) \/\/ Autoprefixer ve cssnano uygula\n .pipe(dest('dist\/css', { sourcemaps: '.' })); \/\/ Derlenmi\u015f CSS'i dist\/css'e kaydet\n}\n\nexports.css = cssTask; \/\/ 'gulp css' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nBu g\u00f6rev, src\/scss<\/code> klas\u00f6r\u00fcndeki t\u00fcm .scss<\/code> dosyalar\u0131n\u0131 al\u0131r, Sass’a derler, PostCSS ile autoprefixer<\/code> ve cssnano<\/code> uygular ve son olarak dist\/css<\/code> klas\u00f6r\u00fcne kaydeder. sourcemaps: true<\/code> ile kaynak haritalar\u0131 olu\u015fturulur, bu da taray\u0131c\u0131da hata ay\u0131klama yaparken orijinal Sass dosyalar\u0131na geri d\u00f6nmenizi sa\u011flar.<\/p>\nJavaScript \u0130\u015fleme: Babel ile D\u00f6n\u00fc\u015ft\u00fcrme ve Uglify<\/h3>\n
Modern JavaScript (ES6+) kullanmak yayg\u0131nd\u0131r, ancak eski taray\u0131c\u0131lar bu s\u00f6z dizimini desteklemeyebilir. Babel ile JavaScript’i eski taray\u0131c\u0131 uyumlu hale getirebiliriz. Ayr\u0131ca, dosyalar\u0131 s\u0131k\u0131\u015ft\u0131rmak (uglify) da performans i\u00e7in \u00f6nemlidir.<\/p>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
JavaScript d\u00f6n\u00fc\u015f\u00fcm\u00fc ve s\u0131k\u0131\u015ft\u0131rma i\u00e7in a\u015fa\u011f\u0131daki paketlere ihtiyac\u0131m\u0131z var:<\/p>\n
npm install --save-dev gulp-babel @babel\/core @babel\/preset-env gulp-uglify<\/code><\/pre>\n* gulp-babel<\/code>: JavaScript kodunu Babel ile d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in Gulp eklentisi.
\n* @babel\/core<\/code>: Babel’\u0131n \u00e7ekirdek k\u00fct\u00fcphanesi.
\n* @babel\/preset-env<\/code>: JavaScript’i hedef taray\u0131c\u0131 uyumlulu\u011funa g\u00f6re d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in Babel \u00f6n ayar\u0131.
\n* gulp-uglify<\/code>: JavaScript dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rmak i\u00e7in Gulp eklentisi.<\/p>\ngulpfile.js<\/code> \u0130\u00e7in G\u00f6rev Tan\u0131mlama<\/h4>\nProje yap\u0131m\u0131zda src\/js<\/code> klas\u00f6r\u00fcnde JavaScript dosyalar\u0131m\u0131z\u0131n oldu\u011funu ve i\u015flenmi\u015f JavaScript’i dist\/js<\/code> klas\u00f6r\u00fcne kaydetmek istedi\u011fimizi varsayal\u0131m.<\/p>\n\/\/ gulpfile.js devam\u0131...\n\nconst babel = require('gulp-babel');\nconst uglify = require('gulp-uglify');\n\n\/\/ JavaScript i\u015fleme g\u00f6revi\nfunction jsTask() {\n return src('src\/js\/<\/em>\/*.js', { sourcemaps: true })\n .pipe(babel({\n presets: ['@babel\/env'] \/\/ ES6+ kodunu d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in @babel\/preset-env kullan\n }))\n .pipe(uglify()) \/\/ JavaScript'i s\u0131k\u0131\u015ft\u0131r\n .pipe(dest('dist\/js', { sourcemaps: '.' }));\n}\n\nexports.js = jsTask; \/\/ 'gulp js' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nBu g\u00f6rev, src\/js<\/code> klas\u00f6r\u00fcndeki t\u00fcm .js<\/code> dosyalar\u0131n\u0131 al\u0131r, Babel ile d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, uglify<\/code> ile s\u0131k\u0131\u015ft\u0131r\u0131r ve dist\/js<\/code> klas\u00f6r\u00fcne kaydeder.<\/p>\nResim Optimizasyonu<\/h3>\n
Web sitelerinin performans\u0131nda resim boyutlar\u0131 \u00f6nemli bir rol oynar. Gulp ile resimleri optimize ederek boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltebiliriz.<\/p>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
Resim optimizasyonu i\u00e7in gulp-imagemin<\/code> paketine ihtiyac\u0131m\u0131z var:<\/p>\nnpm install --save-dev gulp-imagemin@7.1.0 # Veya en son versiyonu<\/code><\/pre>\ngulp-imagemin<\/code> v8 ve sonras\u0131 ES mod\u00fclleri kullan\u0131r, bu da CommonJS tabanl\u0131 gulpfile.js<\/code> i\u00e7in sorun \u00e7\u0131karabilir. Bu y\u00fczden v7.1.0 kullanmak daha g\u00fcvenli olabilir veya gulpfile.js<\/code>‘i ES mod\u00fcl\u00fcne d\u00f6n\u00fc\u015ft\u00fcrmek gerekir. Bu \u00f6rnekte CommonJS yap\u0131s\u0131n\u0131 korumak ad\u0131na v7.1.0 kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\ngulpfile.js<\/code> \u0130\u00e7in G\u00f6rev Tan\u0131mlama<\/h4>\nProje yap\u0131m\u0131zda src\/images<\/code> klas\u00f6r\u00fcnde resimlerimizin oldu\u011funu ve optimize edilmi\u015f resimleri dist\/images<\/code> klas\u00f6r\u00fcne kaydetmek istedi\u011fimizi varsayal\u0131m.<\/p>\n\/\/ gulpfile.js devam\u0131...\n\nconst imagemin = require('gulp-imagemin');\n\n\/\/ Resim optimizasyon g\u00f6revi\nfunction imgTask() {\n return src('src\/images\/<\/em>\/*.{jpg,jpeg,png,gif,svg}') \/\/ T\u00fcm resim dosyalar\u0131n\u0131 al\n .pipe(imagemin([\n imagemin.gifsicle({ interlaced: true }),\n imagemin.mozjpeg({ quality: 75, progressive: true }),\n imagemin.optipng({ optimizationLevel: 5 }),\n imagemin.svgo({\n plugins: [\n { removeViewBox: true },\n { cleanupIDs: false }\n ]\n })\n ])) \/\/ Resimleri optimize et\n .pipe(dest('dist\/images')); \/\/ Optimize edilmi\u015f resimleri dist\/images'a kaydet\n}\n\nexports.img = imgTask; \/\/ 'gulp img' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nBu g\u00f6rev, src\/images<\/code> klas\u00f6r\u00fcndeki \u00e7e\u015fitli resim formatlar\u0131n\u0131 optimize eder ve dist\/images<\/code> klas\u00f6r\u00fcne kaydeder.<\/p>\nDosya \u0130zleme (Watching Files)<\/h3>\n
Geli\u015ftirme s\u00fcrecinde, kaynak dosyalar\u0131n\u0131zda bir de\u011fi\u015fiklik oldu\u011funda Gulp’\u0131n ilgili g\u00f6revleri otomatik olarak \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 istersiniz. Bu, watch<\/code> fonksiyonu ile yap\u0131l\u0131r.<\/p>\n\/\/ gulpfile.js devam\u0131...\n\n\/\/ Dosya izleme g\u00f6revi\nfunction watchTask() {\n watch('src\/scss\/<\/em>\/*.scss', series(cssTask)); \/\/ SCSS dosyalar\u0131n\u0131 izle, de\u011fi\u015fince cssTask'\u0131 \u00e7al\u0131\u015ft\u0131r\n watch('src\/js\/<\/em>\/*.js', series(jsTask)); \/\/ JS dosyalar\u0131n\u0131 izle, de\u011fi\u015fince jsTask'\u0131 \u00e7al\u0131\u015ft\u0131r\n watch('src\/images\/<\/em>\/*.{jpg,jpeg,png,gif,svg}', series(imgTask)); \/\/ Resim dosyalar\u0131n\u0131 izle\n}\n\nexports.watch = watchTask; \/\/ 'gulp watch' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nwatch<\/code> fonksiyonu iki ana arg\u00fcman al\u0131r: izlenecek dosya yolu (glob deseni) ve de\u011fi\u015fiklik oldu\u011funda \u00e7al\u0131\u015ft\u0131r\u0131lacak g\u00f6rev(ler). series()<\/code> kullanarak g\u00f6revlerin s\u0131ral\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011fl\u0131yoruz.<\/p>\nParalel ve S\u0131ral\u0131 G\u00f6revler<\/h3>\n
Gulp’ta g\u00f6revleri series()<\/code> (s\u0131ral\u0131) veya parallel()<\/code> (paralel) olarak birle\u015ftirebilirsiniz.
\n* series()<\/code>: G\u00f6revleri birbiri ard\u0131na, biri bitmeden di\u011ferini ba\u015flatmadan \u00e7al\u0131\u015ft\u0131r\u0131r. \u00d6rne\u011fin, \u00f6nce CSS’i derle, sonra JavaScript’i derle.
\n* parallel()<\/code>: G\u00f6revleri e\u015fzamanl\u0131 olarak \u00e7al\u0131\u015ft\u0131r\u0131r. \u00d6rne\u011fin, CSS ve JavaScript derleme g\u00f6revleri birbirine ba\u011f\u0131ml\u0131 de\u011filse, paralel \u00e7al\u0131\u015ft\u0131r\u0131larak zaman kazan\u0131labilir.<\/p>\nGenel bir build<\/code> g\u00f6revi olu\u015ftural\u0131m:<\/p>\n\/\/ gulpfile.js devam\u0131...\n\n\/\/ Genel build g\u00f6revi: CSS, JS ve resimleri paralel olarak i\u015fler\nconst build = parallel(cssTask, jsTask, imgTask);\n\n\/\/ Varsay\u0131lan g\u00f6rev: \u00d6nce build yap, sonra dosyalar\u0131 izle\nexports.default = series(build, watchTask);\nexports.build = build; \/\/ 'gulp build' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nArt\u0131k gulp build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, t\u00fcm CSS, JS ve resim optimizasyon g\u00f6revleri paralel olarak \u00e7al\u0131\u015facakt\u0131r. gulp<\/code> (varsay\u0131lan g\u00f6rev) komutu ise \u00f6nce t\u00fcm dosyalar\u0131 i\u015fleyecek, ard\u0131ndan de\u011fi\u015fiklikleri izlemeye ba\u015flayacakt\u0131r.<\/p>\nGeli\u015fmi\u015f Gulp Kullan\u0131m\u0131 ve Entegrasyonlar<\/h2>\n
Gulp.js’in temel g\u00f6revlerini anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi daha karma\u015f\u0131k senaryolar\u0131 ve entegrasyonlar\u0131 ele alal\u0131m.<\/p>\n
Ortam De\u011fi\u015fkenleri ve Ko\u015fullu G\u00f6revler<\/h3>\n
Geli\u015ftirme ve \u00fcretim ortamlar\u0131 aras\u0131nda farkl\u0131 Gulp davran\u0131\u015flar\u0131 isteyebilirsiniz. \u00d6rne\u011fin, geli\u015ftirme ortam\u0131nda kaynak haritalar\u0131 (sourcemaps) istersiniz ama \u00fcretimde istemezsiniz. Bunu ortam de\u011fi\u015fkenleri ve ko\u015fullu mant\u0131kla y\u00f6netebiliriz.<\/p>\n
\/\/ gulpfile.js devam\u0131...\n\nconst yargs = require('yargs');\nconst gulpiF = require('gulp-if');\n\n\/\/ Komut sat\u0131r\u0131 arg\u00fcmanlar\u0131n\u0131 al\nconst argv = yargs.argv;\nconst isProduction = argv.production; \/\/ 'gulp --production' ile \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda true olur\n\n\/\/ ... (\u00d6nceki g\u00f6rev tan\u0131mlamalar\u0131) ...\n\nfunction cssTask() {\n return src('src\/scss\/<\/em>\/*.scss', { sourcemaps: !isProduction }) \/\/ \u00dcretimde sourcemap yok\n .pipe(sass().on('error', sass.logError))\n .pipe(postcss([autoprefixer(), cssnano()]))\n .pipe(dest('dist\/css', { sourcemaps: !isProduction ? '.' : false })); \/\/ \u00dcretimde sourcemap yok\n}\n\nfunction jsTask() {\n return src('src\/js\/<\/em>\/*.js', { sourcemaps: !isProduction })\n .pipe(babel({\n presets: ['@babel\/env']\n }))\n .pipe(gulpiF(isProduction, uglify())) \/\/ Sadece \u00fcretimde uglify yap\n .pipe(dest('dist\/js', { sourcemaps: !isProduction ? '.' : false }));\n}\n\n\/\/ ... (Di\u011fer g\u00f6revler) ...\n\n\/\/ Komut sat\u0131r\u0131: 'gulp build --production' veya 'gulp --production'\n\/\/ gulp-if paketi, ko\u015fullu olarak pipe'lar\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/code><\/pre>\nyargs<\/code> paketi, komut sat\u0131r\u0131 arg\u00fcmanlar\u0131n\u0131 kolayca ayr\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. gulp-if<\/code> ise belirli bir ko\u015ful do\u011fruysa bir Gulp eklentisini \u00e7al\u0131\u015ft\u0131rman\u0131za yarar.<\/p>\nFTP\/SFTP ile Da\u011f\u0131t\u0131m (Deployment)<\/h3>\n
Gulp.js’i kullanarak projenizi do\u011frudan VPS’inize veya ba\u015fka bir uzak sunucuya da\u011f\u0131tabilirsiniz. Bu, manuel FTP i\u015flemlerini ortadan kald\u0131r\u0131r.<\/p>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
FTP veya SFTP ile da\u011f\u0131t\u0131m i\u00e7in gulp-sftp<\/code> veya gulp-ftp<\/code> paketlerini kullanabilirsiniz. SFTP daha g\u00fcvenli oldu\u011fu i\u00e7in onu tercih edelim.<\/p>\nnpm install --save-dev gulp-sftp<\/code><\/pre>\ngulpfile.js<\/code> \u0130\u00e7in G\u00f6rev Tan\u0131mlama<\/h4>\nDa\u011f\u0131t\u0131m g\u00f6revini tan\u0131mlamak i\u00e7in sunucu bilgilerinizi (kullan\u0131c\u0131 ad\u0131, \u015fifre\/anahtar, host, uzak dizin) kullanman\u0131z gerekecektir. Bu bilgileri do\u011frudan gulpfile.js<\/code> i\u00e7ine yazmak yerine, bir .env<\/code> dosyas\u0131 veya yap\u0131land\u0131rma dosyas\u0131 kullanmak daha g\u00fcvenlidir.<\/p>\n\/\/ gulpfile.js devam\u0131...\n\nconst sftp = require('gulp-sftp');\nconst dotenv = require('dotenv');\n\ndotenv.config(); \/\/ .env dosyas\u0131n\u0131 y\u00fckle\n\nfunction deployTask() {\n return src('dist\/<\/em>\/*') \/\/ dist klas\u00f6r\u00fcndeki t\u00fcm dosyalar\u0131 al\n .pipe(sftp({\n host: process.env.SFTP_HOST,\n user: process.env.SFTP_USER,\n pass: process.env.SFTP_PASSWORD, \/\/ Veya privateKey: fs.readFileSync('~\/.ssh\/id_rsa')\n remotePath: process.env.SFTP_REMOTE_PATH\n }));\n}\n\nexports.deploy = deployTask; \/\/ 'gulp deploy' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\n.env<\/code> dosyas\u0131 olu\u015fturun (\u00f6rne\u011fin, projenizin k\u00f6k dizininde):<\/p>\nSFTP_HOST=your_vps_ip_address\nSFTP_USER=your_username\nSFTP_PASSWORD=your_password\nSFTP_REMOTE_PATH=\/var\/www\/html\/your_project<\/code><\/pre>\nnpm install --save-dev dotenv<\/code> ile dotenv<\/code> paketini kurmay\u0131 unutmay\u0131n.
\ngulp deploy<\/code> komutu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, dist<\/code> klas\u00f6r\u00fcndeki t\u00fcm dosyalar VPS’inizdeki belirtilen uzak yola y\u00fcklenecektir.<\/p>\nVersiyonlama (Cache Busting)<\/h3>\n
Taray\u0131c\u0131 \u00f6nbellekleme, web sitelerinin y\u00fcklenme h\u0131z\u0131n\u0131 art\u0131r\u0131r, ancak g\u00fcncellenmi\u015f dosyalar\u0131n eski s\u00fcr\u00fcmlerinin taray\u0131c\u0131da kalmas\u0131na neden olabilir. Versiyonlama (cache busting), dosya adlar\u0131na benzersiz bir hash ekleyerek bu sorunu \u00e7\u00f6zer.<\/p>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
Versiyonlama i\u00e7in gulp-rev<\/code> ve gulp-rev-replace<\/code> paketlerine ihtiyac\u0131m\u0131z var:<\/p>\nnpm install --save-dev gulp-rev gulp-rev-replace<\/code><\/pre>\ngulpfile.js<\/code> \u0130\u00e7in G\u00f6rev Tan\u0131mlama<\/h4>\nBu g\u00f6rev genellikle CSS ve JS dosyalar\u0131 i\u015flendikten sonra \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n
\/\/ gulpfile.js devam\u0131...\n\nconst rev = require('gulp-rev');\nconst revReplace = require('gulp-rev-replace');\n\n\/\/ Versiyonlama g\u00f6revi\nfunction revTask() {\n return src(['dist\/\/.css', 'dist\/<\/strong>\/<\/em>.js']) \/\/ CSS ve JS dosyalar\u0131n\u0131 al\n .pipe(rev()) \/\/ Dosya adlar\u0131na hash ekle (\u00f6rne\u011fin, style.css -> style-abcdef12.css)\n .pipe(dest('dist')) \/\/ Yeni adland\u0131r\u0131lm\u0131\u015f dosyalar\u0131 kaydet\n .pipe(rev.manifest()) \/\/ Manifest dosyas\u0131n\u0131 olu\u015ftur (orijinal ad -> hash'li ad e\u015fle\u015fmeleri)\n .pipe(dest('dist')); \/\/ Manifest dosyas\u0131n\u0131 dist klas\u00f6r\u00fcne kaydet\n}\n\n\/\/ HTML'deki referanslar\u0131 g\u00fcncelleme g\u00f6revi\nfunction revReplaceTask() {\n const manifest = src('dist\/rev-manifest.json'); \/\/ Olu\u015fturulan manifest dosyas\u0131n\u0131 al\n\n return src('dist\/<\/em>\/*.html') \/\/ HTML dosyalar\u0131n\u0131 al\n .pipe(revReplace({ manifest: manifest })) \/\/ Manifest'e g\u00f6re referanslar\u0131 g\u00fcncelle\n .pipe(dest('dist')); \/\/ G\u00fcncellenmi\u015f HTML'i kaydet\n}\n\nexports.rev = series(revTask, revReplaceTask); \/\/ 'gulp rev' ile \u00e7a\u011fr\u0131l\u0131r<\/code><\/pre>\nBu g\u00f6rev, \u00f6nce CSS ve JS dosyalar\u0131na hash ekler, ard\u0131ndan rev-manifest.json<\/code> ad\u0131nda bir dosya olu\u015fturur. Daha sonra revReplaceTask<\/code> ile HTML dosyalar\u0131ndaki bu CSS ve JS referanslar\u0131n\u0131 g\u00fcnceller.<\/p>\nGulp.js’i VPS’te Otomatikle\u015ftirmek<\/h2>\n
Gulp g\u00f6revlerini manuel olarak \u00e7al\u0131\u015ft\u0131rmak yerine, VPS’inizde otomatikle\u015ftirmenin birka\u00e7 yolu vard\u0131r. Bu, \u00f6zellikle s\u00fcrekli entegrasyon\/da\u011f\u0131t\u0131m (CI\/CD) i\u015f ak\u0131\u015flar\u0131 i\u00e7in \u00f6nemlidir.<\/p>\n
PM2 ile Arka Planda \u00c7al\u0131\u015ft\u0131rma<\/h3>\n
PM2, Node.js uygulamalar\u0131n\u0131 \u00fcretim ortam\u0131nda y\u00f6netmek i\u00e7in pop\u00fcler bir s\u00fcre\u00e7 y\u00f6neticisidir. Gulp watch<\/code> g\u00f6revini veya tek seferlik bir build<\/code> g\u00f6revini arka planda \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131labilir.<\/p>\nPM2 Kurulumu<\/h4>\n
PM2’yi global olarak kurun:<\/p>\n
npm install -g pm2<\/code><\/pre>\nGulp G\u00f6revini PM2 ile \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
E\u011fer Gulp’\u0131n watch<\/code> g\u00f6revini s\u00fcrekli olarak arka planda \u00e7al\u0131\u015ft\u0131rmak isterseniz (\u00f6rne\u011fin, bir dosya sunucusunda de\u011fi\u015fiklikleri izlemek i\u00e7in):<\/p>\ncd \/path\/to\/your\/project\npm2 start gulp --name \"my-gulp-watcher\" -- watch<\/code><\/pre>\nBu komut, Gulp’\u0131n watch<\/code> g\u00f6revini my-gulp-watcher<\/code> ad\u0131yla bir PM2 s\u00fcreci olarak ba\u015flat\u0131r.
\nTek seferlik bir build<\/code> g\u00f6revini \u00e7al\u0131\u015ft\u0131rmak ve bitince otomatik kapanmas\u0131n\u0131 sa\u011flamak i\u00e7in:<\/p>\ncd \/path\/to\/your\/project\npm2 start gulp --name \"my-gulp-build\" -- build --no-daemon --merge-logs --json --output \/dev\/null --error \/dev\/null\nVeya daha basiti, sadece \u00e7al\u0131\u015ft\u0131rmak ve loglar\u0131 g\u00f6rmek i\u00e7in:<\/h2>\npm2 start gulp --name \"my-gulp-build\" -- build\npm2 stop my-gulp-build # \u0130\u015f bitince durdur\npm2 delete my-gulp-build # S\u00fcreci sil<\/code><\/pre>\n
pm2 list<\/code> ile \u00e7al\u0131\u015fan s\u00fcre\u00e7leri g\u00f6rebilirsiniz.
\npm2 logs my-gulp-watcher<\/code> ile loglar\u0131 takip edebilirsiniz.
\npm2 startup<\/code> komutu ile PM2’nin sunucu yeniden ba\u015flad\u0131\u011f\u0131nda otomatik olarak ba\u015flamas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\nCI\/CD Entegrasyonu (Gitlab CI, Jenkins, Github Actions vb.)<\/h3>\n
Gulp’\u0131 VPS’te \u00e7al\u0131\u015ft\u0131rman\u0131n en g\u00fc\u00e7l\u00fc ve modern yolu, bir CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) boru hatt\u0131na entegre etmektir. Bu, kodunuz bir Git deposuna itildi\u011finde otomatik olarak derleme, test ve da\u011f\u0131t\u0131m i\u015flemlerini tetikler.<\/p>\n
Temel mant\u0131k \u015f\u00f6yledir:<\/p>\n
\n- Kodunuzu Git (GitHub, GitLab, Bitbucket vb.) deposuna g\u00f6nderin.<\/li>\n
- CI\/CD arac\u0131 (GitLab CI, GitHub Actions, Jenkins, Travis CI vb.) bu de\u011fi\u015fikli\u011fi alg\u0131lar.<\/li>\n
- CI\/CD arac\u0131, VPS’inizde veya kendi konteynerinde bir “runner” (\u00e7al\u0131\u015ft\u0131r\u0131c\u0131) ba\u015flat\u0131r.<\/li>\n
- Bu runner, projenizin deposunu klonlar.<\/li>\n
- Node.js ve npm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kurar (
npm install<\/code>).<\/li>\n- Gulp build g\u00f6revini \u00e7al\u0131\u015ft\u0131r\u0131r (
gulp build --production<\/code>).<\/li>\n- Ba\u015far\u0131l\u0131 olursa, da\u011f\u0131t\u0131m g\u00f6revini \u00e7al\u0131\u015ft\u0131r\u0131r (
gulp deploy<\/code>) veya derlenmi\u015f dosyalar\u0131 VPS’inize SSH\/SFTP ile kopyalar.<\/li>\n<\/ol>\nBu y\u00f6ntem, her kod de\u011fi\u015fikli\u011finde projenizin otomatik olarak g\u00fcncellenmesini ve da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flar, bu da insan hatas\u0131n\u0131 azalt\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r. Detayl\u0131 bir CI\/CD kurulumu, kullan\u0131lan araca g\u00f6re de\u011fi\u015fir ve bu makalenin kapsam\u0131n\u0131 a\u015far, ancak Gulp g\u00f6revlerinizin bu t\u00fcr bir otomasyonun temelini olu\u015fturdu\u011funu unutmamak \u00f6nemlidir. VPS’iniz, bu CI\/CD s\u00fcrecinin hedef sunucusu veya baz\u0131 durumlarda CI\/CD runner’\u0131 olarak g\u00f6rev yapabilir.<\/p>\n
S\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n
Gulp.js’i VPS’te kullan\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 yayg\u0131n sorunlar ve \u00e7\u00f6z\u00fcmleri:<\/p>\n
\n- \n
gulp<\/code> komutu bulunam\u0131yor (