Gulp nedir? Nasıl kullanılır? #1

Gulp ile ilgili yazı serisinin ilkine hoşgeldiniz. Bu ilk yazımızda gulp un ne olduğundan ve nasıl kullanacağımızdan bahsedeceğiz.

• Gulp sıklıkla tekrarlanması gereken işleri otomatikleştirmeyi sağlar.
• PHP,node.js ve java gibi birçok dil ile birlikte kullanılabilir.
• Kullanımı son derece basittir.
• Farklı amaçlar ile kullanılabilecek 100 lerce plugin desteği ile birçok farklı iş için kullanılabilir.

Gulp node.js ile yazılmış bir araç olduğundan sisteminizde kullanabilmek için node.js in kurulu olması gerekmekte.

Aşağıdaki komut ile ilk olarak sisteminize gulp un komut satırı aracını yüklüyoruz.

npm install -g gulp-cli

Yükleme sonrasında gulp -v yazdığınızda gulp versiyonu dönüyorsa kurulum sorunsuz tamamlanmıştır.

Şimdi bir klasör oluşturup aşağıdaki komut ile gulp ve gulp-util modüllerini indirelim.

npm install --save-dev gulp gulp-util

Gulp ayarlarının tamamını gulpfile.js dosyası üzerinden yapacağız.

gulpfile.js dosyamızı oluşturup içine aşağıdaki kodları ekleyelim.

var gulp  = require('gulp');
    gutil = require('gulp-util');

gulp.task('default', function() {
    gutil.log('hello gulp!');
});

gulp komutunu çalıştırırsak aşağıdaki gibi bir çıktıyla karşılaşacağız.

gulp.task ile gulp a yapılmasını istediğimiz bir task ekliyoruz. Sadece gulp komutunu çalıştırdığımızda adındanda anlaşıldığı üzere default taskını çalıştırıyor. Başka bir task eklediğimiz zaman aşağıdaki şekilde tek bir task ı yada birkaç farklı task ı çalıştırabiliyoruz.

gulp task1 task2 

gulpfile.js yi aşağıdaki şekilde değiştirip yukarıdaki komutu çalıştırırsanız aşağıdaki çıktıyı alacaksınız.

var gulp  = require('gulp');
    gutil = require('gulp-util');

gulp.task('task1', function(){
    gutil.log('task1..');
});

gulp.task('task2', function(){
    gutil.log('task2..');
});

gulp.task('default', function() {
    gutil.log('hello gulp!');
});









gulp.task ile ilk parametrede task adı ikinci parametrede ise fonksiyonu ekliyoruz. Ama istersen ikinci parametre yerine çalışmasını istediğimiz bir task ekleyebilir ve üçüncü parametrede fonksiyonu ekleyebiliriz.

task2 yi şekildeki gibi değiştirerek task1 in task2 çağırıldığında çalışmasını sağlayabiliriz.

gulp task2 çalıştırdığımızda alacağımız çıktı yine yukarıdaki gibi olacaktır.

gulp.task('task2', ['task1'], function(){
    gutil.log('task2..');
});

Bu ilk yazımızda gulp un ne olduğundan ve nasıl kullanıldığından basit şekilde bahsettik. İlerleyen yazılarda sass,babel,browser-sync gibi araçlar ile nasıl kullanılacağını göreceğiz. Sonraki yazıda görüşmek üzere.