GULPJS İLE ÇALIŞMAK

Front-end çalışmalarımız sırasında iş akışımızın daha verimli ve sağlıklı bir şekilde gerçekleştirilmesini sağlayan nodejs tabanlı bir javascript aracıdır. Bu sebeple gulpjs kurulumu için öncelikle nodejs'in kurulumunu gerçekleştirmemiz gerekmektedir.

NodeJS

Adresinden kolayca indirerek nodejs kurulumunu gerçekleştirebilirsiniz.

Kurulumu gerçekleştirdikten sonra npm paket yöneticisini kullanarak gulpjs'in kurulumunu gerçekleştiriyoruz. Bunun için komut satırımızı açıyoruz, ardından şu komutu giriyoruz.

npm install -g gulp

Kurulum tamamlandıktan sonra gulpjs'nin versiyonunu kontrol ederek sistemimizde kurulu olup olmadığını kontrol edebiliriz.

gulp -v

Komutu ile kontrolümüzü gerçekleştirdikten sonra projelerimizde gulpjs'i nasıl kullanabiliriz ona bir göz atalım.

İşlemi sıfırdan gerçekleştirmek açısından öncelikle ornek isminde bir klasör oluşturdum.
Ardından klasörü vscode ile açtım. Gulp komutlarını vscode editörünün terminali sayesinde çalıştıracağım.

Öncelikle gulpjs'i projemize dahil ediyorum. Bu işlemi gulpjs'i kullanmak istediğiniz her projede gerçekleştirmek zorundasınız.

npm install gulp --save-dev

 Bu işlem tamamlandıktan sonra node_modules klasörü projemize eklenmiş olmalıdır.

Ardından kullanmak istediğimiz gulpjs eklentilerini kurmamız gerekmektedir. Eklenti ihtiyacı kişiden kişiye göre değişmekle birlikte ben sizlere kendi kullandığım eklentileri göstereceğim.Sizlerde basit bir araştırma ile eklentileri ve özelliklerini rahatça bulabilirsiniz.

Gulpjs eklentilerini ise şu komutla kurabilirsiniz.

npm install --save-dev browser-sync gulp-sass gulp-nodemon gulp-autoprefixer gulp-sourcemaps

Eklentiler sayesinde yazdığımız kodun browser tarafından otomatik olarak çalıştırılmasını, sass dosyalarımızın css dosyalarına çevrilmesini vb. birçok işlemi otomatik gerçekleştirebiliyoruz. Zaten birazdan tüm bunları test etmiş olacağız.

Gulpjs nimetinden yararlanabilmek için projemizde gulpfile.js adında bir dosya oluşturmak zorundayız. Projemizin ana dizininde bu dosyayı oluşturuyoruz.

Ardından şu kodu dosyaya yazarak kaydediyoruz.

const gulp = require('gulp')
const browserSync = require('browser-sync').create()
const sass = require('gulp-sass')
const nodemon = require('gulp-nodemon')
const prefix = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps')
const reload = browserSync.reload

gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
  gulp.watch('./**/*.html').on('change', reload)
  gulp.watch("./**/*.scss", ['css']);
})

gulp.task('css', () => {
  return gulp.src('./scss/main.scss')
  .pipe(sass())
  .pipe(prefix())
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream())
})

gulp.task('default', ['browser-sync', 'css'])

Bu kod sayesinde yazdığımız html ve css kodları tarayıcı tarafından otomatik olarak algılanacak ve değişiklikler tarayıcıda gösterilecektir. Ayrıca sass dosyalarının css dosyalarına çevrilmesini de sağlayacaktır.
Bu kullanım şekliyle sass dosyalarını css dosyalarına çevrilmesini istiyor iseniz scss klasörü altında bir main.scss klasörü açmalı ve kodları direk içine yazmalısınız veyahut diğer scss dosyalarını main.scss dosyası içine import etmelisinizdir. Farklı bir kullanım şekli olarak tüm scss dosyalarının ayrı ayrı css dosyalarını elde etmek istiyorsanız.

gulp.task('css', () => {
  return gulp.src('./scss/main.scss')
  .pipe(sass())
  .pipe(prefix())
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream())
})

Üstteki kodun yerine:

 gulp.task('css', function () {
 
  return gulp.src('./scss/**/*.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./'));
});

Bu kodu yazabilirsiniz.

Ardından projemizde bir package.json oluşması için terminalden aşağıdaki kodu vermelisiniz.

npm init

Bu işlemin ardından ana dizinimiz şu hali almalıdır.

İşlemlerimizi tamamladık şimdi keyfini çıkarmaya başlayalım.İlk olarak bir adet index.html dosyası oluşturuyorum. Daha sonra ise scss klasörü altına bir adet main.scss dosyası ve global klasörü oluşturalım ardından global klasörü altına header.scss dosyası oluşturalım.

Son haliyle projemiz bu şekilde görülmelidir. Gulpjs'i başlatmak için terminale gulp komutunu yazıyoruz.

Bu komutun ardından gulp çalışır ve localhost:3000 portu dinlenmeye başlanır. Biz de böylece basit örnekler ile gulpjs'i denemeye başlayalım.

index.html dosyasına bir h1 tagı açarak yazımızı yazalım.

Şimdi tekrardan tarayıcımızı kontrol edelim.

Tarayıcımız biz sayfayı yenilemeden dosyamızdaki değişiklikleri gulpjs sayesinde yakaladı ve bize gösterdi.

Bir örnek daha yapalım ve sass dosyalarının css dosyalarına çevrilmesini birlikte gözlemleyelim.

index.html dosyamıza main.css dosyamızı dahil edelim. Ardından ornek isimli class'a sahip bir div oluşturalım. İçine ise h1 tagı açalım.

scss/global/header.scss dosyamıza kod yazarak ornek isimli class'a ve h1 tagına bir tasarım verelim.

Daha sonra ise main.scss dosyasına header.scss dosyasını import edelim.

Şimdi isterseniz tarayıcımıza bir bakalım.

Gördüğünüz gibi sass dosyamız css dosyamıza çevrilmiş.

main.css dosyamıza da bir göz atalım.

Gördüğünüz gibi sass dosyamıza yazdığımız kodlar css kodlarına çevrilmiş.

Okuduğunuz için teşekkür ederim.