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

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