Grunt ile Projedeki Hammallık Gerektiren İşlerden Kurtulmak

Grunt ile Projedeki Hammallık Gerektiren İşlerden Kurtulmak

Proje geliştirirken olmazsa olmazlardan biridir Grunt. Bilhassa büyük projelerde bir hayli 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 kimi 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. Zira bir araç ne kadar çok kullanılıyorsa o kadar çok üzerinde geliştirme yapılıyor demektir. Ne kadar geliştirme o kadar kuvvetli 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) başka bir deyişle siz bazı görevler tanımlarsınız javascript ile grunt da bu görevleri sizin verdiğiniz sırada çalıştırır. Zati emel budur, belli görevler olacak, bu görevler belli aralıklarla veyahut farklık olduğunda dosyada çalıştırılacak. Mantık oldukça kolay, heyetim ve daha fazla ayrıntı için aşağıdaki adresi inceleyebilirsiniz.

Grunt.js kurulum

Sanmayın ki çok meşakkatli bir heyetimi var. Şayet Node.js heyeti ise sisteminizde yapmanız şart olan tek şey komut satırına “npm install -g grunt-cli” yazmak. Hepsi bu. Tabi sonrasında enter’a medya dememe gerek yok herhalde.

Grunt heyetiminden sonra bir grunt görev dosyası oluşturmanız gerekmekte. Bunun için yapmanız gereken web sayfasından örnek kodları incelemek aslında. Fakat derseniz ki örnek bir şeyler görelim buyrun o vakit.

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 isimli iki değişik personel 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 söz etmek istiyorum. Zati grunt konusunda heyetim ve örnek dosya gibi bilgilere internette bir kaç arama kelimesi ile erişebilirsiniz. Google açıp, “grunt js heyetim” ve “grunt js örnek dosya” yazmanız yeterli.

Sass

CSS yazan yoktur herhalde artık. Daha doğrusu Sass, Less veyahut Stylus kullanmayan yoktur diyelim. Bu önişleyicileri kullandıktan sonra kodumuzun CSS koduna dönüşmesi için şart olan 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 başka bir deyişle minify eden bir eklenti. Heyetim 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. Örneğin CSS dosyalarının boyutları konusunda çalışarak daha hızlı yüklenmelerini sağlayabilir. Daha ayrıntılı bilgi için tıklayın. Heyetim 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. Heyetim için “npm install grunt-contrib-concat–save-dev” yazmalısınız.

Watch

İşte size en güzellerinden biri, hem de belki de en bi güzeli. Tanımladığınız dosyalarda farklık olduğunda farklığı idrak edip, komutu çalıştıran eklenti Watch. Daimi olarak kodunuzu izliyor farklık olduğunda çalışıyor. Tabi farklık yaptığınız an değil kaydettiğiniz an bunu yapıyor. Tek bir eksiği var bence o da şu yalnızca farklık olanı değil, görev çalıştırıcısına konan tüm dosyaları çalıştırıyor ve derliyor. Farklık olanı da olmayanı da derliyor. Tabi bunun içinde başka bir eklenti var. Watch heyetimi için “npm install grunt-contrib-watch–save-dev”

Newer

Watchda söz ettiğim meselesi çözmek için kullanacağımız bir eklenti. Yalnızca farklık olan dosyanın derlenmesini sağlıyor. Yapmanız şart olan farklık olduğunda derlenmesini istediğiniz komutun satırına “newer:” yazmak. Ayrıntılı bilgi için tıklayınız. Heyetim 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 söz etmek istedim. Zati sizler internette kısa bir araştırma ile bir hayli eklentiye erişebilirsiniz.