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

Sezai AlkanFrontend Developer

Node.js #gulp #sass #convert

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.