SASS ön işlemcilerinin derlenmesi için bu blog yazımızda Gulpjs kullanacağız. Peki sass veya scss nedir. Eğer programlamanın nimetlerinden css kullanarak yararlanmak istiyorsanız sass kullanabilirsiniz. Yani sitede kullanılan ana rengi bir değişkene atayarak , ilerleyen tarihlerde bu rengi değiştirmek istediğinizde sadece değişkenin değerini kullanarak tüm sitenizin rengini değiştirebilirsiniz.
Şimdi gelelim nasıl kullanacağımıza:
- Node js bilgisayarınızda kurulumu ? Kurulu olup olmadığı öğrenmek için node –version komutunu terminalde kullanarak öğrenebilirsiniz. Eğer kurulu değilse https://nodejs.org/en/ linkinden kurma işlemini yapabilirsiniz
- npm install –global gulp-cli //Terminale yazın
- Hangi dizine kurmak istiyorsanız işlemi onun içine geçin ve npm init – -y yazin. Bu komut dizininizde package.json dosyasi oluşturacaktır.
- npm install –save-dev gulp //Terminale yazın Developer olarak package.json dosyasına bağımlılık ekleyecek.
- Terminale gulp –version yazarak aşağıdaki sonucu görün.
Aşağıdaki gibi Gulpfile.js isminde içi boş bir dosya oluşturun. Sass isminde bir klasor ve içine iki tane boş scss uzantılı dosya oluşturun (index.scss ve main.scss)
Gulpfile.js isminde içi boş bir dosya oluşturun. Bu dosyanın içine aşağıdaki kod satırlarını yapıştırın.
7.satırda anlatılan sass klasörünüzün altındaki bütün scss uzantılı dosyaları 9. satırda css klasörünüzün altına css uzantılı olarak render eder. Sizin ekstradan css klasörü oluşturmanıza gerek kalmaz. İlk render ettiğinizde otomatik olarak oluşturur. Render etmek için gulp buildStyles komutunu terminale yazmanız lazım.
Gulp Watch Nedir
14. satırda gulp.watch komutuyla da sass klasorunuzun altındaki scss uzantılı dosyaları her kaydettiğinizde otomatık render işlemi yapmak içindir. Böylece sass dosyasındaki css kodu değişikliğinde tekrar tekrar render render etmek zorunda kalmazsınız. CAlıstırmak için terminalde gulp watch yazın.
Aşağıda index.scss dosyasını değiştirdiğimizde sağdaki render edilen index.css otomatik değişir. Gulp wacht işlemi aktif olduğu için sadece kaydetmemiz yeterlidir.
Umarım faydalı olmuştur.