Proje geliştirirken olmazsa olmazlardan biridir Grunt. Özellikle büyük projelerde birçok işi otomatikleştirmemiz gerekir. Her seferinde aynı işlemi tekrar tekrar yapmak hem yorucu hem de mantıksızdır. İşte bu yüzden işleri otomatikleştiren bazı araçlara ihtiyacımız olur. Bunların arasında da en hızlısına ve en sık kullanılana ihtiyacımız vardır. Çünkü bir araç ne kadar çok kullanılıyorsa o kadar çok üzerinde geliştirme yapılıyor demektir. Ne kadar geliştirme o kadar güçlü bir araç.
İşte bunların arasında tahminim en çok kullanılanlardan biri Grunt’tır. Grunt bir görev çalıştırıcıdır (task runner) yani siz bir takım görevler tanımlarsınız javascript ile grunt da bu görevleri sizin verdiğiniz sırada çalıştırır. Zaten amaç budur, belli görevler olacak, bu görevler belli aralıklarla ya da değişiklik olduğunda dosyada çalıştırılacak. Mantık oldukça basit, kurulum ve daha fazla detay için aşağıdaki adresi inceleyebilirsiniz.
Sanmayın ki çok meşakkatli bir kurulumu var. Eğer Node.js kurulu ise sisteminizde yapmanız gereken tek şey komut satırına “npm install -g grunt-cli” yazmak. Hepsi bu. Tabi sonrasında enter’a basın dememe gerek yok herhalde.
Grunt kurulumundan sonra bir grunt görev dosyası oluşturmanız gerekmekte. Bunun için yapmanız gereken web sayfasından örnek kodları incelemek aslında. Ama derseniz ki örnek bir şeyler görelim buyrun o zaman.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['jshint']); }; |
Dikkat ederseniz burada jshint ve watch adlı iki farklı eleman var. Bunlar grunt ile kullanabileceğimiz eklentilerden ikisi. Grunt eklentileri ile devleşen bir görev çalıştırıcıdır. İşte bu yazımda aslında sizlere bu görev çalıştırıcının olmazsa olmaz eklentilerinden bahsetmek istiyorum. Zaten grunt ile ilgili kurulum ve örnek dosya gibi bilgilere internette bir kaç arama kelimesi ile ulaşabilirsiniz. Google açıp, “grunt js kurulum” ve “grunt js örnek dosya” yazmanız yeterli.
Sass
CSS yazan yoktur herhalde artık. Daha doğrusu Sass, Less ya da Stylus kullanmayan yoktur diyelim. Bu önişleyicileri kullandıktan sonra kodumuzun CSS koduna dönüşmesi için gereken bir eklentidir Sass eklentisi. Kendisi Sass dosyalarınızı CSS dosyasına çevirmek için kullandığımız bir eklenti. Kurmak için komut satırına “npm install grunt-contrib-Sass –save-dev” yazmanız yeterli
Uglify
Kullandığım ve olmazsa olmaz olduklarını düşündüğüm eklentilerden ilki Uglify. Kendisi kodlarımızı düzene sokan yani minify eden bir eklenti. Kurulum için komut satırına “npm install grunt-contrib-uglify –save-dev” yazmanız yeterli.
CSSMin
Uglify ile aynı işlevi görmektedir. CSS dosyalarımızı minify etmek için kullandığımız bir eklenti. Elbette ek özellikleri var. Mesela CSS dosyalarının boyutları ile ilgili çalışarak daha hızlı yüklenmelerini sağlayabilir. Daha detaylı bilgi için tıklayın. Kurulum için ise “npm install grunt-contrib-cssmin –save-dev” yazmalısınız.
Concat
Bazen birkaç dosyayı birleştirme gereği duyacaksınız. İşte bu birleştirme işlemi için kullanacağınız eklenti Concat eklentisi. Kurulum için “npm install grunt-contrib-concat–save-dev” yazmalısınız.
Watch
İşte size en güzellerinden biri, hatta belki de en bi güzeli. Tanımladığınız dosyalarda değişiklik olduğunda değişikliği algılayıp, komutu çalıştıran eklenti Watch. Sürekli olarak kodunuzu takip ediyor değişiklik olduğunda çalışıyor. Tabi değişiklik yaptığınız an değil kaydettiğiniz an bunu yapıyor. Tek bir eksiği var bence o da şu sadece değişiklik olanı değil, görev çalıştırıcısına konan tüm dosyaları çalıştırıyor ve derliyor. Değişiklik olanı da olmayanı da derliyor. Tabi bunun içinde başka bir eklenti var. Watch kurulumu için “npm install grunt-contrib-watch–save-dev”
Newer
Watchda bahsettiğim sorunu çözmek için kullanacağımız bir eklenti. Sadece değişiklik olan dosyanın derlenmesini sağlıyor. Yapmanız gereken değişiklik olduğunda derlenmesini istediğiniz komutun satırına “newer:” yazmak. Detaylı bilgi için tıklayınız. Kurulum için ise “npm install grunt-contrib-newer –save-dev”
Bunların haricinde imagelar için kullanılan eklentiler, performans arttırıcı, kopyalama yapan eklentiler de var. Bu yazımda sık kullanacağınız ve olmazsa olmaz olarak gördüğüm bir kaç eklentiden bahsetmek istedim. Zaten sizler internette kısa bir araştırma ile birçok eklentiye ulaşabilirsiniz.
Umarım yararlı olmuştur.
