Gulp 4'e Giriş

Gulp, bir web sitesi geliştirirken sıkça ortaya çıkan görevleri otomatikleştirmek için bir araçtır: CSS ve JavaScript dosyalarını küçültme, birden fazla dosyayı birleştirme, LESS ve SASS'ı CSS'e dönüştürme, TypeScript dilini JavaScript'e dönüştürme ve benzeri görevler.

Çalışma prensibi şu şekildedir: Gulp sistemi için görevler yazılır ve Gulp bu görevleri belirtilen sırayla yerine getirir.

Hadi Gulp'u kuralım. Bunun için komut satırında şu komutu çalıştırmanız gerekir:

npm install --global gulp-cli

Şimdi Gulp'un kullanılacağı bir proje oluşturalım. Bunun için proje klasöründe aşağıdaki dosya yapısını oluşturacağız:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

Ayrıca proje klasörüne package.json eklenmelidir. Bundan sonra Gulp'u projeye kurabiliriz. Bunun için, komut satırında projenin bulunduğu klasördeyken aşağıdaki komutu çalıştırmak gerekir:

npm install --save-dev gulp

Bir proje oluşturun ve içine Gulp'u kurun.