Gulp nedir, nasıl kullanılır?

Merhaba,

Front-end alanında adını sıklıkla duyduğumuz araçlardan olan GulpJS, kısaca bir task runner (görev çalıştırıcısı) diyebiliriz.

Peki neden Gulp veya benzeri görev çalıştırıcılarına ihtiyaç duyarız?

• Optimizasyon,
• Css/Javascript dosyarını sıkıştırmak, birleştirmek.
• LESS/SASS veya Pug/Haml gibi Ön-derleyicileri rahatlıkla compile (derlemek) edebilmek için ihtiyaç duyarız.
• Server oluşturup daha hızlı ve verimli geliştirme yapmak gibi… bir çok işte kullanabiliriz.

Node/Npm Kurulumu

İlk olarak NodeJS web sitesinden nodejs paketini indirip kurulumunu yapıyoruz.

Sonrasında command line`ı (cmd) açıp aşağıdaki komutu yazıp çalıştırıyoruz.

npm install -g gulp

Yukarıdaki komut ile -g (global) olarak gulp kurulumunu yapıyoruz.

Gulp kurulumunun başarılı olup, olmadığını öğrenmek için aşağıdaki komut ile versiyon kontrolü yapabilirsiniz.

gulp -v

Gulp Kullanımı

İlk olarak NPM ile package.json oluşturmamız gerecek bu dosya uygulamayı paylaştığınızda gerekli ve zorunlu olan plugin ve modülleri belirtecek böylece geliştirme yapacak kişiler “npm install” komutu ile package.json’da olan kütüphaneleri indirebilecekler.

npm init

yukarıdaki komutu çalıştırdığınız da name, version, description, entry point, git repo, keywords, author gibi bilgileri girmenizi isteyecektir. Bu bilgileri projenize göre girebilirsiniz.

Is this ok (yes) gibi bir mesaj gördüğünüzde initialize işlemi tamamlanmış olacak, başlayabiliriz.

npm install --save-dev gulp

komutunu çalıştırarak gulp u projemize dahil ettik, package.json dosyasına baktığımızda Gulp  devDepencendies yani geliştirme için zorunlu olarak eklendiğini görebilirsiniz.

Gulp görevleri

Gulp için bir sürü plugin var ben bazılarını göstereceğim diğerlerini buraya tıklayarak görebilirsiniz. Bir görev oluşturabilmek için projemizin ana dizinine gulpfile.js adında bir javascript dosyası oluşturuyoruz. Daha sonra cmd kullanarak npm ile istediğimiz paketleri yüklüyoruz.

npm install gulp-less
npm install gulp-autoprefixer
npm install browser-sync

ukarıdaki komutları cmd ile çalıştırdığımız da gulp-less, autoprefixer ve browser-sync kütüphanelerini projemize indirmiş olduk. Şimdide bunları tanımlayalım.

Ana dizinde oluşturduğumuz gulpfile.js dosyasını açıp indirmiş olduğumuz kütüphaneleri dahil edelim.

var gulp         = require("gulp");
var less         = require('gulp-less');
var browserSync  = require('browser-sync');
var autoprefixer       = require('gulp-autoprefixer');

yukarıdaki şekilde dahil ettikten sonra görevlerini(task) oluşturalım.

Gulp ile Less kullanımı

Bir task oluşturuyoruz task adı yukarıda require ederken belirtiğimiz gibi ” less “. Task komutlarını giriyoruz gulp.src ile ana dizinde olan tüm(*) less dosyalarını yakalıyoruz.

.pipe ile dosyalara less kütüphanesindeki komutları uyguluyor gulp.dest ile less/ klasöründeki dosyaları .css olarak compile ediyor.

gulp.task('less', function(){
    gulp.src('*.less')
        .pipe(less())
        .pipe(gulp.dest('less'));
});

Browser-Sync 

Aşağıdaki komutu çalıştırmak için command line da gulp browser-sync yazmamız yeterli. Bir kaç saniye içinde browser da localhost:3000 olarak bir pencere açacak istersiniz başka kütüphaneler ile etkileşimli kullanabilirsiniz. Örneğin kod editöründe control+s yapıp kaydettiğinizde f5 tuşuna basmadan pencereniz yenilenebilir.

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

Auto Prefixer 

Bu eklenti gerçekten çok işe yarıyor. Örneğin CSS yazarken CSS3 kullandığımızda tarayıcı desteği için özelliklere -webkit, -moz gibi ön ekler (prefix) eklememiz gerekiyordu. Ancak bunu da bir görev olarak ayarlayıp otomatik eklenmesi sağlayabiliriz.

Aşağıda görüldüğü yeni bir task oluşturduk. gulp.src ile css dosyamızı seçtik .pipe komutu ile dosya üzerinde autoprefixer işlemi yapıyoruz daha sonra bunu gulp.dest ile dist klasörüne kaydediyoruz.

gulp.task('default', () =>
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

.task()

Bir görev aşağıdaki şekilde oluşturuluyor. İlk olarak kütüphaneyi dahil ediyorsunuz sonrasında gulp.task komutu ile bir task oluşturuyorsunuz. Açıklama olarak belirttiğim gibi task komutlarını fonksiyon içerisine giriyoruz. Task adını ise aşağıda da olduğu gibi ‘default’ yazan yer, task adı.

var gulp = require('gulp');
gulp.task('default', function() {
// task komutları buraya.
});

.watch()

Watch ile server da ki değişiklikleri izler ve servera yollar bu gulp ile geliyor yeni birşey indirmeye gerek yok.

gulp.task('watch', ['browserSync'], function(){
    gulp.watch('app/*.less', ['css']);
});

Bu eklentiler dışında işinize yarayacak bir sürü eklenti var bunları buradan inceleyebilirsiniz. Sormak istediklerinizi yorumlarda belirtebilirsiniz.