Gulp Nedir? Kurulumu ve Kullanımı

Yazıda gulp nedir ile gulp anlatılmış, gulp kurulumu yapılmış ve çeşitli gulp modülleri kullanılarak gulp kullanımı ile ilgili bilgiler verilmiştir.

Gulp nedir?

Gulp, tekrar eden işlemleri görev olarak tanımlamak ve çalıştırmak için kullanılır.

Tekrar eden işlemlere örnek olarak

• SASS, Less, Stylus vb. CSS ön işlemcilerinin derlenmesi,
• TypeScript, CoffeeScript vb. kodların JavaScript koduna çevrilmesi,
• CSS ve JavaScript dosyalarının birleştirilmesi
• HTML, CSS ve JavaScript dosyalarının sıkıştırılması
• …

vb. verilebilir.

Gulp kurulumu

Gulp bir Node.js modülüdür. Gulp kurulumu için bilgisayarınızda Node.js ve NPM aracının kurulu olması gerekir.

Detaylı bilgiye Node.js Kurulumu ve Node.js NPM Paket Yöneticisi yazısından ulaşabilirsiniz.

Gulp kurulumu ve gulp komutunun komut yorumlayıcısında çalışması için öncelikle gulp-cli modülünün yüklenmesi gerekir.

Gulp komut yorumlayıcısını indirmek için

npm install gulp-cli -g

komutu kullanılır.

Geliştirilen proje için kullanılan modüllerin bağımlılığını eklemek için NPM aracı ile package.json dosyasının oluşturulması faydalı olacaktır.

Proje için package.json dosyasını adım adım oluşturmak için

npm init

komutu veya hızlıca oluşturmak için

npm init -y

komutu kullanılır.

Projede Gulp modüllerinin kullanılması için gulp paketinin indirilmesi gerekir.

Gulp modülünü projeye indirmek için

npm install gulp --save-dev

komutu kullanılır.

Gulp ve Gulp modülerini indirirken kullanılan –save-dev parametresi, paketlerin package.json dosyasına geliştirici bağımlılığı olarak eklenmesini sağlar.

Gulp kullanımı

Gulp çalıştırıldığında varsayılan olarak gulpfile.js dosyasına baktığından görevleri gulpfile.js dosyasına yazmak yaygın olarak yapılan bir işlemdir.

Gulp görevleri Node.js Dersleri bölümünden detaylarına ulaşabileceğiniz Node.js kodları gibi yazılır.

Gulp komutlarını kullanmak için gulp dosyasının başına

const gulp = require("gulp");

komutu eklenir.

Görev oluşturmak

Gulp çalıştırıldığında varsayılan olarak default görevini çalıştırır.

Varsayılan görev yazılmadığında Gulp uyarı verir. Varsayılan (default) görevin yazılması zorunlu değildir. Ancak yaygın olarak yazılmaktadır.

Gulp ile görev oluşturmak için task metodu kullanılır.

gulp.task(gorevAdi [, gorevListesi] [, gorevIslemleri])

Basit bir görev oluşturmak.

const gulp = require("gulp");

gulp.task("gorev-adi", function () {

  console.log("Görev tamamlandı");

});

Gulp 4 sürümü ile birlikte görev tanımı sıradan JavaScript fonksiyonu gibi yapılmaktadır.

function gorevAdi() {
    console.log("Görev tamamlandı");
}

Gulp görevleri Node.js Modül Yazmak ve Node.js module.exports yazısında yer alan modül yazımı gibi tanımlanır.

const gulp = require("gulp");

function gorevAdi() {
    console.log("Görev tamamlandı");
}

exports.default = gorevAdi;

Yazılan görevi çalıştırmak için

gulp gorev-adi

veya default görevi çalıştırmak için

gulp

komutu kullanılır.

Gulp 4 ile birlikte gelen asenkron çalışma özelliğinden dolayı görevin bittiğini aşağıdaki gibi belirtilmesi gerekir.

function gorevAdi(bitti) {
    console.log("Görev tamamlandı");
    bitti();
}

Diğer bir yöntem ise async ile fonksiyonun asenkron olduğunu belirtmektir.

async function gorevAdi() {
    console.log("Görev tamamlandı");
}

Gulp görevleriyle ilgili bilgiler modüle parametre olarak geçirilir.

İhtiyaca göre farklı bir Gulp modülünün indirilmesi gerekebilir.

Gulp için yazılmış modüllere

gulpjs.com/plugins/

adresinden ulaşabilirsiniz.

Gulp modülleri

Gulp modüllerini indirmek için

npm install <modul-adi> --save-dev

komutu kullanılır.

CSS dosyalarını sıkıştırmak için kullanılan gulp-clean-css modülünü indirmek için

npm install gulp-clean-css --save-dev

komutu kullanılır.

Gulp modüllerini NPM ile indirirken başında gulp olduğuna dikkat edin.

Modülleri dahil etmek

Gulp modüllerini yazılan göreve dahil etmek için

const modulAdi = require("modul-adi");

komutu kullanılır.

Modül dahil edildikten sonra task metodu ile görev yazılır.

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

gulp.task("gorev-adi", function () {
  return gulp.src("dosya.css")
    .pipe(cleanCSS())
    .pipe(gulp.dest("css"));
});

Yazılan görevler dosya üzerinde işlem yapmak için kullanıldığından src (source) metodu ile dosya veya klasör seçilir.

Seçim işleminden sonra modül pipe metodu ile işlem kuyruğuna eklenir ve çalıştırılır.

Gulp içerisinde yer alan dest (destination) metodu, belirtilen klasöre işlem sonucunda ortaya çıkan dosyaları oluşturur.

Gulp görevlerinin default görevine bağlanması yaygın olarak kullanılan bir yöntemdir.

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

gulp.task("gorev1", function () {
  console.log("Görev 1 işlemleri");
});

gulp.task("gorev2", function () {
  console.log("Görev 2 işlemleri");
});

gulp.task("default", ["gorev1", "gorev2"]);
// exports.default = gulp.series(gorev1, gorev2) // gulp v4 sıralı
// exports.default = gulp.parallel(gorev1, gorev2) // gulp v4 paralel-sırasız

Gulp, komut yorumlayıcısında argüman eklenmeden çalıştırıldığında sırasıyla default, gorev1 ve gorev2 görevlerini çalıştıracaktır.

Gulp SASS

Modül SASS kodlarını CSS kodlarına çevirmek için kullanılır.

Modülü indirmek için

npm install gulp-sass --save-dev

komutu kullanılır.

Aşağıdaki SASS kodlarının proje klasörü içerisindeki scss klasörüne arkaplan.scss olarak yazıldığını varsayalım.

$bg-color: seagreen;
$default-font: arial, verdana;

body {
  background-color: $bg-color;
  font-family: $default-font;
}

Yazılan SASS kodlarını CSS kodlarına çevirmek için gerekli görevi yazalım ve komut satırına gulp sass yazarak çalıştıralım.

const gulp = require("gulp");
const sass = require("gulp-sass");

gulp.task("sass", function () {
  gulp.src("./scss/arkaplan.scss")
    .pipe(sass())
    .pipe(gulp.dest("css"));
});

Görev çalıştırıldığında scss klasörü içerisindeki arkaplan.scss kodlarını CSS kodlarına çevirerek CSS klasörüne arkaplan.css olarak kaydedecektir.

Klasör içerisindeki tüm dosyaların çevrilmesi için dosya adı yerine yıldız (*) eklenmesi yeterli olacaktır.

Modül için parametre eklenmek istenirse modül metodunun içine parametre ile geçirilmesi yeterli olacaktır.

const gulp = require("gulp");
const sass = require("gulp-sass");

gulp.task("sass", function () {
  gulp.src("./scss/arkaplan.scss")
    .pipe(sass({ outputStyle: "compressed" }))
    .pipe(gulp.dest("css"));
});

Parametre olarak geçirilen nesne içerisindeki outputStyle özelliğiyle çevirme işleminden sonra kodların sıkıştırılmasını sağladık.

NOT: Modülün detaylı açıklama ve parametrelerine modül sayfasındaki dokümantasyondan ulaşabilirsiniz.

Gulp uglify

Modül JavaScript kodlarını sıkıştırmak için kullanılır.

Modülü indirmek için

npm install gulp-uglify --save-dev

komutu kullanılır.

Aşağıdaki JavaScript kodlarının proje klasörü içerisindeki script klasörüne ekle.js olarak yazıldığını varsayalım.

var isimler = ["Yusuf", "Ramazan", "Sinan", "Mehmet"];

for (var sira = 0; sira < isimler.length; sira++) {

    isimler[sira] = isimler[sira] + " SEZER";

}

Yazılan JavaScript kodlarını sıkıştırmak için gerekli görevi yazalım ve komut satırına gulp js yazarak çalıştıralım.

const gulp = require("gulp");
const uglify = require("gulp-uglify");

gulp.task("js", function () {
  gulp.src("./script/*")
    .pipe(uglify())
    .pipe(gulp.dest("js"));
});

Görev çalıştırıldığında script klasörü içerisindeki tüm JavaScript dosyalarını sıkıştırarak, ayrı ayrı sıkıştırılmış halini js klasörüne yazacaktır.

Yazılan görevleri default görevine bağlayarak sadece gulp komutu ile çalışmasını sağlayabiliriz.

const gulp = require("gulp");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");

gulp.task("sass", function () {
  gulp.src("./scss/*")
    .pipe(sass())
    .pipe(gulp.dest("css"));
});

gulp.task("js", function () {
  gulp.src("./script/*")
    .pipe(uglify())
    .pipe(gulp.dest("js"));
});

gulp.task("default", ["sass", "js"]);
// exports.default = gulp.series(sass, js) // gulp v4 sıralı
// exports.default = gulp.parallel(sass, js) // gulp v4 paralel-sırasız

NOT: Modülün detaylı açıklama ve parametrelerine modül sayfasındaki dokümantasyondan ulaşabilirsiniz.

Gulp watch

Gulp içerisinde yer alan watch metodu ile dosyaları takip ederek değişiklik olduğunda otomatik olarak görevlerin çalıştırılmasını sağlayabiliriz.

const gulp = require("gulp");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");

gulp.task("sass", function () {
  gulp.src("./scss/*")
    .pipe(sass())
    .pipe(gulp.dest("css"));
});

gulp.task("js", function () {
  gulp.src("./script/*")
    .pipe(uglify())
    .pipe(gulp.dest("js"));
});

gulp.task("default", ["sass", "js"], function () {

  gulp.watch("./scss/*", ["sass"]);

  gulp.watch("./script/*", ["js"]);

});

Gulp komut yorumlayıcısında argüman eklenmeden çalıştırıldığında sırasıyla default, sass ve js görevlerini çalıştıracaktır.

Görevler çalıştırıldıktan sonra watch metodu ile scss ve script klasöründeki tüm dosyalar takip edilecek.

Dosya değişikliğinde watch metodunun ikinci parametresine gönderilen görevler çalıştırılacaktır.

Dosya değişiklik takibini bırakmak için Ctrl + C kısayolu ile komut yorumlayıcısından çıkılması gerekir.