Eğer gerçekten istersen, mutlaka olur.

Görev Yöneticisi (Task Manager/Runner): Grunt

1 ay ago, Written by , Posted in NOTLARIM

Neden bir görev yöneticisine ihtiyacımız var?

Öncelikle böyle bir soruyla yazıya başlamak istedim. Biz geliştiricilerin, özellikle front-end geliştiricilerin, rutin olarak yaptığı bir çok işlem vardır. Örneğin; kodlamamız bittikten sonra ve release(yayınlama) aşamasına geçtiğimizde javascript ve css dosyalarımızın yorumlardan temizlemek ve anlaşılabilirlikten uzaklaştırmak için minify edilmesi. Bir başka örnek ise; düzenli olarak dosyadaki değişiklikleri kontrol edip, compile öncesi hata kontrolü: Linting. Linting ile hem gramer hataları hem de programatik hatalar kontrol edilebilir. Bunlar dışında, derleme, unit test vb. bir çok görevler tanıplanıp gerçeklenebilir. Kısacası, az efor çok iş sloganı için bir görev yöneticisine biz geliştiricelerin her zaman ihtiyacı olmuştur.

Peki neden Grunt?

Grunt çok geniş bir yelpazeye sahip. Hemen hemen duyduğunuz tüm ihtiyaçlara yönelik pluginler mevcut. Bu pluginleri kullanarak tasklarınızı neredeyse hiç efor sarfetmeden, kolaylıkla tanımlayabilirsiniz. Baktınız ki ihtiyacınız olan plugini bulamadınız. Kendi plugininizi geliştirip yayınlayabilirsiniz.

Her gün genişleyen plugin listesinin tamamına buradan erişebilirsiniz.

Gerekli ortamın hazırlanması

Grunt ve pluginleri npm(nodejs package manager) yüklenir ve yönetilir. Bu yüzden sisteminizde nodejs kurulu ve npm güncel olmalıdır. Henüz bunlara sahip değilseniz, öncelikle sizi buraya alayım.

Eğer sisteminizde npm en güncel şekilde kuruluysa, grunt komut arayüzünü (CLI, command line interface) kurmaya hazırız demektir. Herhangi bir yerde komut satırını/terminali açıp aşağıdaki komutu kullanalım. Bu komut sayesinde cli kurulmuş olup, grant sistem pathine eklenmiş olacak. Dolayısıyla herhangi bir yerde açtığınız terminalde gruntı kullanabileceksiniz.

npm install -g grunt-cli

Grunt projesinin yapısı

Temel olarak bir grunt projesinde 2 adet önemli dosya bulunmakta: package.json ve gruntfile.js

Daha önce nodejs ve npm ile aşina olduysanız, package.json size tanıdık gelecektir. Bu dosyada projede kullandığınız pluginlerin/kütüphanelerin listesi ve projenin versiyonu, adı, yazarı gibi bilgiler bulunur.

Gruntfile.js dosyası ise taskların tanımlandığı, yönetildiği ve pluginlerin projeye yüklendiği asıl dosya. Project.json dosyası ile aynı dizinde bulunması gerekmektedir. Grantfile dosyası temel olarak 4 bölümden oluşur:

  • “Wrapper” fonksiyon
  • Proje ve task ayarları
  • Grunt pluginlerini ve taskları yükleme
  • Özel tanımlanmış tasklar

Örnek bir proje oluşturalım

Amacımız bir javascript dosyasında her değişiklik yaptığımızda algılanıp dosyanın minify edilmesini sağlamak.
Öncelikle project.json dosyamızı hazırlayalım. Burada tanımladığımız değerlere gruntfile içerisinde erişebileceğiz. Dolayısıyla varsayılan değişkenlerle çakışmayacak şekilde kendi değişkenlerinizi de tanımlayabilirsiniz. Project.json hakkında detaylı bilgi için buraya göz atabilirsiniz.

İhtiyacımız olacak pluginler:

  • grunt
  • grunt-contrib-uglify
  • grunt-contrib-watch

npm kullanarak projemize dahil edelim. Aşağıdaki komutlar package.json dosyasına pluginlerimizi ekliyor.

npm install grunt –save-dev
npm install grunt-contrib-uglify –save-dev
npm install grunt-contrib-watch –save-dev

Bu sayede package.json dosyasının son hali:

Bu işlemlerden sonra proje klasörümüzün yapısı şu hale geldi:

Şu an minify edebilme yetisine sahip bir grunt projemiz var. “src” klasörü altına “main.js” diye bir javascript dosyası oluşturalım.

Aşağıdaki komutu terminale yazdığımızda dest klasörü altında main.min.js oluştuğunu göreceksiniz.”minify” bizim taska verdiğimiz isimdi.

grunt minify

Watcher Eklenmesi

Şu ana kadar grunt projemize sadece minify özelliğini ekledik. Şimdi ise bir watcher tanımlayalım ve dosyamızı belirli aralıklarla kontrol etsin. Eğer bir değişiklik sezilirse, minify görevini tekrar çalıştıralım. Bu şekilde siz projelerinizi geliştirirken, arkaplanda grant, scriptlerinizi minify etmekle görevlendirilmiş olur.

Konfigürasyon yaptığımız yerde aşağıdaki gibi watcher taskını tanımlayalım.

Aşağıdaki komutu yazdığımızda watcher çalışmaya başlar ve değişiklik sezdiğinde tanımladığımız görevleri yerine getirir. Sadece minify etmesini istediğimiz için uglify taskını çalıştıracaktır. Minify etme işlemi bittiğinde, bir sonraki değişikliği bekleyecektir.

grant watcher

Proje kodlarına erişmek için burayı kullanabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir