Grunt’a Başlamak

Nesrin Kalender —  9 Şubat 2015 — Yorum bırakın

Selamlar, sizlere front end developerların işlerini kolaylaştıran Grunt’tan biraz geç de olsa bahsedeceğim. Grunt ile işleri otomatize edip işlerimizi daha hızlı çözebiliriz.

Öncelikle çok kolay bir kurulumu var. Ancak bilgisayarınızda nodejs olması gerekiyor. Yoksa http://nodejs.org adresinden hemen kurulum yapabilirsiniz.

Ardından terminalden;

komutunu çalıştırmanız yeterli. Artık grunt kuruldu. Şimdi işleri nasıl otomatize edeceğiz?
Öncelikle şuan sadece grunt kuruldu bilgisayarımıza. Şimdi kendimize, kullanmak istediğimiz pluginleri seçeceğiz. http://gruntjs.com/plugins adresinden arama yaparak bulabilirsiniz. Zaten grunt tarafından oluşturulmuş belli başlı pluginler var. Örneğin uglify ile js dosyamızın minify edilmiş halini çıktı alabiliriz.

Plugin işlerimlerini gruntfile.js içerisinde yapacağız. Bir de package.json dosyamız olacak ve bu dosya içerisinde kurduğumuz pluginlerin gereklilikleri bulunacak. package.json dosyasını oluşturmak için proje dizininde iken terminalden;

komutunu kullanabilirsiniz. Komutu çalıştırınca size isim, proje reposu vs. sorular gelecek onları girip ‘yes’ dedikten sonra ana dizinde package.json oluşacaktır.

Şimdi sıra bir task oluşturmakta. Clean plugini üzerinden örneklendirelim. Plugin sayfasındaki;

komutu ile kurabiliriz.

Ardından gruntfile.js dosyamızı açıp;

çalışmaya devam edebiliriz. Bir alt satırdaki “grunt.loadNpmTasks(‘grunt-contrib-clean’);” komutunu module.exports içerisinde yazmanız gerekiyor.

dosyamızın son hali bu oldu.

Ardından plugin sayfasından kullanımına bakacağız. Her plugin farklı optionlarla geliyor bunun için plugin sayfasını incelemekte, sayfayı sürekli açık tutmakta fayda var.

Eğer bir default task tanımlamazsak grunt çalışmayacak hata verecek. Bunun için “grunt.registerTask(‘default’, [‘clean’]);” kullanacağız.

Dosyamızın son hali böyle oldu;

Ve son olarak clean ne iş yapacak onu tanımlıyoruz. Kullanımını daha önce belirttiğim gibi plugin sayfasından bakabilirsiniz.

Terminalden proje dizinindeyken ‘grunt’ komutu ile çalıştırabilirsiniz. Sonuç olarak dizin içerisindeki js klasöründe bulunan, uzantısı .js olan dosyaları silecek fakat min.js olanlara dokunmayacaktır.

Ben sizlerle örnek dosya paylaşıyorum fakat içerisindeki node_modules klasörünü kaldırıyorum. Bu klasör sizin pluginleriniz arttıkça boyut olarak artacaktır fakat sizler gruntfile.js ve package.json olduğu için ‘npm i’ komutu ile node_modules klasörünü elde edebilirsiniz.

Örnek Dosya

Nesrin Kalender

Posts Twitter

Web alanına front-end developer olarak katıldı. Kocaeli Üniversitesi'nde Bilgisayar Programclığı okuyor. Şuan Rafineri bünyesinde çalışıyor. HTML5, CSS3, JQuery ve CSS'te SASS'ı severek kullanıyor.

No Comments

Be the first to start the conversation.

Yorum yapmak için