Gulp Nedir?

Gulp

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. Gulp JS¹ 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/veya 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.

gulp-uglify, JavaScript dosyalarını sıkıştırır,
gulp-clean-css, CSS dosyalarını sıkıştırır,
gulp-imagemin, görselleri sıkıştırır,
gulp-image-optimization, görselleri optimize eder,
gulp-jslint, JavaScript hata denetimi yapar,
gulp-csslint, CSS hata denetimi yapar,
gulp-ruby-sass ile SASS, gulp-less ile LESS, gulp-stylus ile de Stylus dosyaları CSS dosyalarına, gulp-coffee ile de CoffeeScript dosyaları JavaScript dosyalarına dönüştürülür,
gulp-concat, CSS ve JavaScript dosyalarını bir araya getirir ve tek dosya olarak sunar,
gulp-watch ise klasör ve dosyalardaki değişiklikleri izler ve değişiklik olması durumunda belirlenen görev(ler)i yerine getirir.

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.