JavaScript

Gulp Nedir?

Güncelleme:
Grunt.js yazısında, Grunt alternatifi olarak Gulp‘tan bahsetmiştim. Öncelikle, bu benzetme task running bağlamında doğru, ancak görevlerin ele alınmasında ve uygulanmasında işler biraz değişiyor ve iki ...
GÖRSEL
Grunt.js yazısında, Grunt alternatifi olarak Gulp‘tan bahsetmiştim. Öncelikle, bu benzetme task running bağlamında doğru, ancak görevlerin ele alınmasında ve uygulanmasında işler biraz değişiyor ve iki uygulama / modül arasında benzerlikler kadar farklılıklar da ortaya çıkıyor. Bu sebeple, bu yazıda Gulp uygulamasından ve temel bir şekilde görevleri nasıl ele aldığından bahsetmeye çalışacağım.

Gulp Nedir?

Az önce de belirttiğim üzere, Gulp bir JavaScript task runner, yani rutin bir şekilde tekrarlanan veya arada sırada belirli durumlarda işleme alınması gereken bir veya daha fazla görevin belirlenen kurallar çerçevesinde işleme alınmasını / yönetilmesini sağlayan, tıpkı Grunt gibi Node.js tabanlı bir JavaScript görev yöneticisi / koşucusudur. Optimizasyon, dosya sıkıştırma ve birleştirme, derleme, değişiklikleri izleme ve uygulama tetikleme gibi eklentilerle tanımlanan pek çok görevi sorunsuz bir şekilde yerine getirebilir. Gulpjs.com ve GitHub üzerinden temel bilgilere ulaşabilirsiniz. Ayrıca, pek çok görevi yerine getirmek üzere hazırlanmış eklentilere de Gulp.js > Plugins sayfasından ulaşılabilir. Eklentiler de yine Node.js modülleridir ve JavaScript paket yöneticiler vasıtasıyla indirilerek projelere dahil edilirler.

Gulp İndirme İşlemi

Gulp‘un bir Node.js tabanlı geliştirildiğini belirtmiştim. Dolayısıyla NPM ve/ya alternatif olarak Yarn paket yöneticisi ile indirme ve yönetim işlemlerini gerçekleştirebiliriz. NPM yazısında lokal ve global kurulumlarla ilgili bazı noktalara değinmiştim. Detaylar için ilgili yazıya kısaca bir göz atabilirsiniz.
npm install gulp --save-dev
#ya da
yarn add gulp
İndirme işleminin ardından versiyon kontrolü ile gulp komutunun cevap verdiğinden emin olabiliriz.
gulp -v
Komut satırı aracılığıyla ilettiğimiz komuta CLI ve lokal versiyon bilgileri dönecektir. Aşağı yukarı alacağımız karşılık şuna benzer olacaktır:
CLI version: 2.2.0
Local version: 4.0.2
Gulp CLI ayrıca yüklenmek istenirse aşağıdaki komutlar aracılığıyla yapılandırılabilir.
npm install -g gulp-cli
#ya da
yarn add gulp-cli
Gulp da yine Grunt gibi package.json dosyasına ve kendi konfigürasyon dosyası olan gulpfile’a ihtiyaç duyar. Modüller package.json dosyasına işlenirken görevler gulpfile (gulpfile.js) dosyasından alınır ve sırasıyla işlenir. Elbette yine Örnek bir gulfile en basit haliyle şu şekidedir:
var gulp = require('gulp');
gulp.task('default', function() {
  // tanımlı görevler
});
Gulp gulp.task() şeklindeki görev ifadeleri içerisinde ayrıca JavaScript fonksiyonlarını da çağırabilmemize olanak sağlamaktadır.
function fonksiyon1 () {
// çeşitli işlemler
}
 
function fonksiyon2 () {
// çeşitli işlemler
}
 
// Task with array of function names
gulp.task ( 'default', ['fonksiyon1','fonksiyon2']);
Her iki durumda da default en temel görevdir, gulp veya gulp default komutlarıyla çağırılır. Farklı görev tanımları da yapılabilmekte, tüm görevler tek seferde ya da ayrı ayrı ya da sıralı olarak işleme alınabilmektedir. Öne çıkan Gulp eklentilerinden de bahsedip bu eklentilerden birkaçını kullanarak örnek bir işlem gerçekleştirelim.Artık Gulp ile örnek bir görev akışı oluşturabiliriz. Adım adım ilerleyeceğim. İlk olarak Yarn ile projemi başlatacağım. Elbette alternatif olarak NPM de kullanılabilir. Diğer yandan, gulp ile ilgili daha detaylı bilgi edinmek isterseniz, Gulp > Quick Start ve Gulp > Creating Tasks yönergelerine göz atabilirsiniz.
yarn init -y
Ardından gulp başta olmak üzere gerekli olan modüllerin indirilmesini sağlayalım. İndirilen modüllerin büyük bir çoğunluğundan yukarıdaki listede bahsetmiştim.
yarn add gulp @babel/core gulp-less gulp-babel gulp-uglify gulp-clean-css gulp-concat gulp-rename gulp-pug del --dev
İlgili modüllerin de indirilmesinin ardından gulp için bir sürüm kontrolü yapabiliriz.
gulp -v
Elbette kurulumlar esnasında bir hata oluşursa detayları da belirtilecektir. Son durumda, node_modules klasörünü hariç tutarsak, proje dizimimizin içeriği şu hale getirebiliriz. scripts, styles ve templates benim oluşturduğum örnek dosyalar. Bu dosyaların içeriğinde herhangi bir şey olmasına gerek yok.
.
├── gulpfile.js
├── package.json
├── src
│   ├── scripts
│   │   └── main
│   │       └── script.js
│   ├── styles
│   │   └── main
│   │       └── style.less
│   └── templates
│       └── home
│           └── home.pug
└── yarn.lock
 
7 directories, 6 files
Yukarıdaki çıktı tree aracı kullanılarak tree -L 4 -I node_modules komutu ile elde edilmiştir.

Artık gulp ile CSS ve JS HTML dosyalarımı düzenleyebilir, derleyebilir ve tek dosya haline getirebilirim.

var gulp = require('gulp'),
  less = require('gulp-less'),
  babel = require('gulp-babel'),
  uglify = require('gulp-uglify'),
  minifyCSS = require('gulp-clean-css'),
  concat = require('gulp-concat'),
  pug = require('gulp-pug'),
  rename = require('gulp-rename'),
  cleanCSS = require('gulp-clean-css'),
  del = require('del');
 
var paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  },
  templates: {
    src: 'src/templates/**/*.pug',
    dest: 'assets/view/'
  }
};
 
function clean() {
  return del(['assets']);
}
 
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}
 
function scripts() {
  return gulp.src(paths.scripts.src, {
      sourcemaps: true
    })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}
 
gulp.task('templates', function buildHTML() {
  return gulp.src(paths.templates.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.templates.dest));
});
 
gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
});
 
var build = gulp.series(clean, gulp.parallel(styles, scripts));
 
gulp.task('default', build);
Görüldüğü üzere hem JS fonksiyonları hem de gulp.task() içeriğinde pipe() tanımlarını yaptım. Örnek olması açısından bu şekilde görevleri tanımlamış olsam da genelde tek bir biçim üzerinden ilerlemekte, okuma kolaylığı sebebiyle de yine tek tanımla ilerlenmesini tavsiye etmekteyim. Yukarıdaki işlemlere baktığımızda default, templates ve watch görevlerinin modülleri işleme aldığını göreceksiniz. default tek başına CSS ve JS dosyalarının derlenmesi, adlarının düzenlenmesi, eski dosyaların silinmesi ve dosyaların birleştirilerek hedef klasöre aktarılması gibi pek çok işlemi yerine getirmekte. templates ise sadece *.pug dosyalarını HTML dosyalarına dönüştürmekte. Son olarak, watch scripts, styles dizinlerindeki değişikliklerin takip edilmesi ve bir değişiklik olması durumunda sadece değişikliğin olduğu tanıma bağlı görev(ler)in yerine getirilmesini sağlamakta.

Son Olarak

Örnek işlemlerimiz bu kadar. Gulp ve grunt kıyaslaması yapmanın uygun olacağını düşünmüyorum. Ancak, kişisel olarak gulp kullanmayı tercih etmekteyim. İlerleyen yazılarda ve örneklerde yine çeşitli görevlerin yerine getirilmesi gibi süreçlerde görev yürütücüleri kullanmaya devam edeceğim. Aşağıda ayrıca önerdiğim bazı yazıları listeliyorum.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.