Grunt Nedir? Kurulumu ve Kullanımı Nasıldır?

Grunt, kısaca bir görev çalıştırıcısıdır. Front-end’de ihtiyaç duyabileceğimiz, sürekli olarak çalıştırdığımız ya da iş yükü fazla olup ara-sıra çalıştırdığımız kod bloklarını otomatik olarak çalıştırmamıza yardımcı oluyor. Çalışma mantığını anladıktan sonra ve hâli hazırda yazılmış eklentileri gördükten sonra yapabilecekleriniz için hayal gücünüzü kullanmanıza gerek kalmayacaktır.

Grunt nedir, nasıl kurulur, kullanılır, örnekler vs olabildiğince değinmeye çalışacağım. Şimdi biraz derine inelim…

---

Grunt Nedir ?

Grunt, yukarıda da belirttiğim üzere görev çalıştırıcısı (koşucusudur), yani terimsel olarak ifade edilecek olursa task runner‘dır. Başka bir task runner olan Gulp’un sağlam bir rakibidir (diyorlar, bana göre ayrı kulvardalar). Görevleri belirler, yapması gerekenleri ifade eder ve çalıştırırsınız, tüm olay aslında bundan ibarettir. Örneğin;

• LESS ya da SASS kullanıyorsanız bu dosyanızı compile ettirebilir,
• Javascript dosyalarınızı minify ettirebilir,
• Bir çok javascript dosyanız varsa bunları bundle haline getirebilirsini

gibi daha bir çok alternatifiniz bulunmakta.

Bu saydıklarım sadece bir kaç örnekten ibaret elbette… Siz de kendi görevinizi oluşturabilir ve Gruntlayabilirsiniz – tabii yazılmışları önce bir incelerseniz boşuna zaman kaybetmez ve alternatif fikirler de elde edinebilirsiniz.

Hazır pluginlere buradan bakabilirsiniz.

Grunt Kurulumu

Kurulum için öncelikle Node.js kurmanız gerekiyor. Eğer Node kurulu ise aşağıdaki satırı, komut satırında çalıştırarak kurabilirsiniz.

Kurmuş olduğumuz grunt-clidir. “CLI”, command line interface‘in kısaltmasıdır. grunt-cli’ı kurduktan sonra herhangi bir dizindeyken komut satırında grunt yazarak çalıştırabilirsiniz. Her proje için yeniden kurulum yapmanıza gerek yok.

Küçük not: eğer Node u yeniden kuruyorsanız ve Windowstaysanız command promt u yeniden başlatmanız gerekiyor.

---

Gereksinim

Her proje için node ile grunt paketini kurmamız gerekiyor. Bunun için öncelikle node’u initialize etmemiz gerekiyor… proje dizinine gidip komut satırına;

yazıp çalıştırıyoruz ve projemizin ismini cismini sormaya başlıyor. Bu bilgiler çok önemli olmadığı için enter enter yapa yapa devam edebilirsiniz. En sonunda “Bu bilgiler doğru mu?” diye sorduğunda yine enter a basıp devam edebilirsiniz. Bu işlem node.js’in dosyası olan package.json dosyasını oluşturmaya yarar ve içine projemiz için ihtiyaç duyacağımız paketleri belirtmek için kullanacağız.

yazıp çalıştırmamız gerekiyor. Ardından node_modules diye bir klasör oluşacak ve klasör içine grunt klasörü eklenecek ve içine de ihtiyaç duyduğu diğer paketler eklenecektir. Not: Buradaki --save parametresini eklemezseniz package.json dosyasına gereksinim olarak eklemez.

---

Gruntfile

Şimdi de Grunt’ın konfigürasyon dosyası olan Gruntfile.js dosyasını oluşturmamız gerekiyor. Aşağıda boş bir Gruntfile.js örneği mevcut.

Bu kod bloğunu taslak olarak varsayın ve isterseniz bir yere kaydedin. Mevcut sürümde boş bir şekilde çalışan gruntfile budur. Tabîi açıklama satırlarını silebilirsiniz… Test etmek için komut satırına sadece

yazmanız yeterli. Eğer bir hata alıyorsanız grunt ya da grunt-cli yüklemede bir problem olmuştur. Hata almıyorsanız konsol çıktısı aşağıdaki gibi olacaktır.

Artık görevleri yazmaya başlayabiliriz anlamına geliyor bu…

Görevleri seçerken daha çok kendi çok kullandıklarımı tercih ettim, siz de ilk başta bunları kullanırsanız (örnekleri yaparken) bir problem olduğunda belirtmeniz kolay olur.

Örnek 1: Uglify

İlk görevimiz javascript dosyalarını minify etmek (sıkıştırmak) olacak. Bunun için grunt-contrib-uglify pluginini kullanacağız. Öncelikle plugini indiriyoruz

Buradaki --save-dev parametresi sadece developmentta kullanacağımız için devDependencies arasına eklememize yarıyor. Yani --save parametresinden farkı birisi productionda diğeri ise development + productionda kullanmamız için…

Gruntfileımızdaki tasklara aşağıdaki kod bloğunu ekliyoruz.

ardından uglifyı kullanabilmek için loadNpmTask yapıyoruz.

daha sonra ise registerTask yapıyoruz

Eğer adımları doğru izlediyseniz sizin de dosyanız aşağıdaki gibi kaynak koda sahip olmalıydı;

Artık hazırız, komut satırında grunt yazıp çalıştırdığınızda js klasöründeki dosya.js adındaki dosya sıkıştırılacak(minify edilecek) ve dosya.min.js adında yeni bir dosya olarak kaydedilecektir.

Not: Daha farkı özelliklere ait bir çok uglify oluşturabilirsiniz. Bunun için yapmanız gereken hedef1 gibi farklı alt objeler oluşturmak ve ayarları vermek. Fakat aynı özelliklere ait olan farklı dosyalar elde etmek istiyorsanız sadece files kısmına yeni bir alt nesne ekleyin. İnternette ilgili örnekler mevcut durumda.

Eğer hedef1 gibi farklı bir obje eklerseniz registerTask’a da bunu belirtmeniz gerekiyor

---

Örnek 2: Uglify ve CSSMin

CSSMin ise adı üstünde CSS dosyalarınızı minify etmenize yardımcı olur. Productionda olabildiğince boyutu azaltmamız gerekiyor ne de olsa…

Yine öncelikle plugini indiriyoruz;

Ardından görevimizi ekliyoruz:

sırada yine loadNpmTask var…

ve son olarak registerTask’a ekliyoruz.

Artık çalıştırmaya hazır. 2 adet css dosyası oluşturun (foo.css ve bar.css olarak) ve bırakın minify etsin.

Eğer herşeyi doğru yerine yerleştirdiyseniz aşağıdaki gibi bir dosyanız olmalı;

Aynı şekilde CSSMin’in de ayarları ve birden çok instance oluşturma özelliği mevcut. Plugin sayfasından detaylara bakabilirsiniz veya yardım isterseniz yorum yazabilirsiniz.

Kolaylıklar dilerim ;)