Kısaca Grunt

Grunt bir görev çalıştırıcısı. Web geliştirme sürecinde ihtiyacınız olan operasyonları otomatize etmenize yarayacak bir araç. Daha çok platforma dönüşmüş olan grunt, yüzlerce eklentiyle istediğiniz forma sokabileceğiniz bir yapılandırma aracı. Hızlıca bir örnek vereceğim. Basit bir web sitesi hazırlıyorsunuz ve stillerinizi css yerine less ile yazdınız, javascriptlerinizi cosnole.log debug satırlarıyla ve bir sürü yorum ile yazdınız. Sitenizi her yayına alacagınızda bir toparlama ve paketleme işi yapmanız gerekiyor, lessilerinizi css'lere derlemek, belki cssmin gibi ufaltma operasyonuna sokmak, imajlarınızı sıkıştırmanız, javascriptlerinizi temizleyip küçültmeniz belki birden fazla kaynağı tek dosyada birleştirmeyi isteyeceksiniz. Her değişiklik yaptığınızda bu işlemleri tekrarlamanıza imkan yok. İşte bu noktada grunt devreye giriyor.

Grunt ile neler yapabilirsiniz?

Sonu yok çünkü kendi eklentilerinizi yazarak node.js yeteneklerini kullanarak yapamayacağınız şey yok. Ama eklenti veritabanından erişebileceğiniz o kadar çok şey var ki.
- Less, Scss, Sass vb... herhangi bir css derleme işinizi
- Kod validasyonu (css, js, html)
- Imaj optimizasyonu
- Birden fazla javascript veya css kaynağını birleştirme
- Css veya javascript sıkıştırma
- Kodunuzdaki yorumları, debug için geriye kalan artıkları temizleme
- Kaynak versiyonlama

Daha sayamadığım bir çok operasyonu grunt ile farklı kombinasyonlarda hazırlamanız mümkün.

Örnek

Versiyonlamayı denemek için kendime bir örnek kod hazırladım ve github'da paylaştım. Basit bir css javascript projesinde kodumu yayınlamadan önce bütün css ve javascript kaynaklarımı sıkıştırıp adlarını versiyonlamarak yayındaki tüm dosyaların en taze kodu kullanmasını sağlamak için grunt kullandım. Projeyehttps://github.com/mfyz/grunt-release-boilerplate adresinden erişebilirsiniz.

Grunt hakkinda daha fazla bilgiye sitesinden erişebilirsiniz:http://gruntjs.com/

Popüler Etiketler

ide editor php phpstorm jetbrains deployment version control svn git html css less gimp howto twitter meta share job developer mfyz bootstrap css3 subversion proje url jquery örnek kod mysql sql optimizasyon analyse procedure rss lifestream parse xml compile compiler macosx windows linux app on-the-fly tebrik framework plugin social tool wireless apple regex htaccess mod_rewrite cookie javascript assets xhtml wanda digital nedir opengraph graph api facebook pharma hack wordpress google seo ios iphone ipad app store store in-app purchase purchase verification integration storekit itunes connect itunes server blog startups language development style mdb2 pear injection query pgsql mssql kitap apache kurulum istatistik insanlar kampanya prepare execute applications free spam ui design js box db code ubuntu workspace optimization media screen license mootools sitemap generator laptop notebook iOS konsol terminal widget object portfolio imza signature mail sosyal medya statistics ruffles doritos while tytz search nasıl cms open source lisans calendar html5 www subdomain redirect crossdomain fstab ntfs fql coding newsletter service oyun database auth http mobile link browsers table ajax xmlhttprequest date tarih internet diff form button input textarea select ie internet explorer export webkit web app music icon ikon grafik download firefox banner logo ux icons cache support browser dokuman kontrol yapıları if zaman network connect subscription ipucu route router login chart radio switch session osx player