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/

Less


Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz.

Less derleyicilerini toparladığım ufak bir yazı hazırladım:http://mfyz.com/dokuman/127/less-dosyalarinizi-anlik-csse-cevirin
Css yazmayı bırakıp Less ile çalışmaya başlamadınız mı? O zaman şu bökümandan devam edin ve less'in avantajlarına göz atıp size ne fayda sağlayabileceğiniz basitçe anlayabilirsiniz.

Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz. Hatta bazıları, açık olan tarayıcılarda, lokal geliştirme ortamınıza ait bir URL açıksa onu da otomatik yeniliyorlar. Dolayısıyla sadece tarayıcınızı kontrol etmeniz yetebiliyor değişiklikleri görmek için.

Bu derleyiciler aynı zamanda less kodunuzu denetleyerek hataları bildiriyorlar. Sonuç olarak yazdığınız less dosyalarınız da css dosyalarınız da geçerli css çıktısı olarak sitenizde yayınlanıyor.

Less.app

Sadece MacOSX'de çalışan bu uygulamaya çalıştığınız projeleri, klasörleri sürükleyip bırakarak otomatik tarattırıp proje olarak ekliyorsunuz. Size o projede bulduğu bütün less uzantılı dosyaları listeliyor. Dosyalar güncellendiği anda da dosyaları css dosyalarına derleyip growl uyarısı ile bildiriyor.
http://incident57.com/less/

Simple Less

Bu uygulama biraz daha basit bir arayüze sahip ve tüm platformlarda çalışıyor. Çok platformda çalışan geliştiriciler için oldukça ideal.
http://wearekiss.com/simpless

Winless

Sadece Windowsta çalışan, klasik Windows arayüzüne sahip ufak bir araç.
http://winless.org/


Hazırlayan: Mehmet Fatih YILDIZ

Popüler Etiketler

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