Gulp ile sass / scss dosyasını css 'e çevirme

Gulp ile dosyaları css 'e dönüştürme

Gulp ile sass dosyalarımızı css 'e dönüştürürken npm üzerinde gulp-sass eklentisini kullanıyoruz. 

npm install sass gulp-sass --save-dev

Çalışma alanımızda, gulp ile beraberinde gulp-sass eklentisini kurduktan sonra gulpfile.js dosyamız içerisinde ekletimizi dahil ediyoruz.

const  {src, dest, watch, parallel} = require('gulp'),
       sass = require('gulp-sass')(require('sass'))

Sass dosyalarımız üzerinde convert işlemi için öncelikle fonksiyonumuzu oluşturmamız gerekiyor, css adında bir fonksiyon oluşturarak devam edelim bu isim sizin kullanımınıza göre değişiklik gösterebilir.

let css = () => {
}

Oluşturduğumuz bu fonksiyon üzerinde yapacağımız işlemleri

return

ile geri döndürmemiz gerekmektedir.

return

ile ilk olarak sass dosyalarımızın bulunduğu dizini işaret etmemiz gerekmektedir. bu işlemi ise

src

methodu ile sağlıyoruz.

let css = () => {

   return  src('./css/**/*')
   
}

Bu işlem sırasında css klasörünün altında bulunun tüm dosya ve klasörlerin içinde bulunan dosyaları elde etmemizi sağlamaktadır.

Dilerseniz aşağıdaki gibi de özelleştirebilirsiniz. 

• css/*.sass           //Css klasöründeki tüm sass uzantılı dosyaları elde eder
• css/*.scss           //Css klasöründeki tüm scss uzantılı dosyaları elde eder
• css/**                 //Css klasöründeki tüm dosyaları elde eder
• css/**/*             //Css klasöründeki tüm dosya ve alt dizindeki dosyalarıda elde eder
• css/**/*.sass    //Css klasöründeki tüm sass ve alt dizindeki sass dosyalarını elde eder
• css/**/*.scss    //Css klasöründeki tüm scss ve alt dizindeki scss dosyalarını elde eder

Dosyalarımızın konumunu belirledikten sonra

pipe

methodu ile içerisinde sass eklentisini çağırıyoruz. Bu kullanımda eklentinin en sade hali baz alınmıştır. Ek olarak eklenti farklı özellikleride desteklemektedir, hata yakalama vb. gibi.

let css = () => {

   return  src('./css/**/*')
   .pipe(sass())
   .pipe(dest('./dist/'))
   
}

En son aşamada ise dönüştürülen dosyamızın

dest

ile çıktısının alınacağı konumu belirlemek gerekmektedir. En sade hali ile fonksiyonumuz hazır durumdadır. Şimdi ise bu fonksiyonu gulp ile çağırabilmemiz için

exports

ile task / görev ismi tanımlamamız gerekmektedir.

exports.css = css

Yukarıdaki tanımlama sonrası terminal üzerinden

gulp css

komutunu çağırarak dosyalarımızı convert edebiliriz.

Sass Dosyalarını izleme

Eğer sass dosyalarınız üzerinde yapılan her değişiklik sonrası dosyanızın otomatik olarak convert edilmesini istiyor iseniz

watch

methodu ile bu işlemi gerçekleştirebiliriz.

Bu işlem içinde ek bir fonksiyon oluşturalım ve bu fonksiyon içerisinde izlenmesi gereken sass dosyalarımızın konumunu belirtelim. 

let izle = () => {

   watch('./css/**/*', css)
   
}

Yukarıda oluşturulan

izle

fonksiyonu içerisinde

watch

methodu iki parametre almış olarak gözükmektedir. Bunların birincisi izlenmesini istediğimiz dosya konumu, ikincisi ise herhangi bir değişiklik aşamasında yapmak istediğimiz işlemdir.
Bu fonksiyon üzerinde ise css klasörünün altında yapılan tüm değişiklikleri izlemek ve herhangi bir değişiklikte

css

fonksiyonunu çalıştırmak olacaktır.

Gulp üzerinde bu fonksiyonumuzu çalıştırabilmemiz için

exports

ile task ismi tanımlamamız gerekmektedir.

exports.css = css
exports.izle = izle
exports.sass = series(izle, css)

En son yukarıdaki gibi bir tanımlama sağlamamız, her iki işlemi ayrı ayrı veya tek bir komut ile çalıştırabilmemizi sağlamaktadır.

• gulp css

      // komutu manuel olarak dosyalarımızın convert edilmesini sağlamaktadır. 

• gulp izle

    // belirtilen dosya konumu üzerinde değişiklik anında çalışacaktır. Bu komut ilk çalıştırma sırasında dosyalarımız convert etmeyecektir.

• gulp sass

   // komutu ise ilk çalıştırmada dosyalarımızı dönüştürecek ve sonrasında dosyalarımız üzerindeki herhangi bir değişikliği dinleyecektir.