Grunt Nedir? Kurulumu ve Kullanımı

Yazıda grunt nedir ile grunt anlatılmış, grunt kurulumu yapılmış ve çeşitli grunt modülleri kullanılarak grunt kullanımı ile ilgili bilgiler verilmiştir.

Grunt nedir?

Grunt görev oluşturmak ve çalıştırmak için kullanılan bir NPM modülüdür.

Grunt geliştirme yaparken sürekli tekrar edilen işlemleri görev olarak oluşturarak hızlıca çalıştırılmasını sağlar.

Örneğin; Bir web uygulaması geliştirirken kullanılan JavaScript, CSS ve HTML kodlarında fazla boşluk ve yorum satırları olabilir.

Fazla boşluk ve yorum satırları için çeşitli internet siteleri aracılığıyla her düzenleme sonrası sıkıştırabilirsiniz.

Ancak bu bir süre sonra zahmetli olacaktır.

Grunt ile her düzenleme sonrası sıkıştırma işlemi için görev oluşturarak fazla boşluk ve yorum satırlarını kaldırabilir veya SASS, LESS gibi CSS ön işlemci kodlarını derleyebilirsiniz.

Ayrıca grunt için yazılmış çeşitli modülleri kullanarak daha farklı tekrar eden işlemler için hazırlanmış görevler oluşturabilirsiniz.

Grunt kurulumu

Grunt kurulumu için bilgisayarınızda Node.js ve NPM aracının kurulu olması gerekir.

Detaylı bilgiye Node.js Kurulumu ve Node.js NPM Paket Yöneticisi yazısından ulaşabilirsiniz.

Grunt kurulumu ve grunt komutunun komut yorumlayıcısında çalışması için grunt-cli modülünün yüklenmesi gerekir.

Gerekli olan modülünün kurulumu için

npm install grunt-cli -g

komutu kullanılır.

Geliştirilen proje için kullanılan modüllerin bağımlılığını eklemek için NPM aracı ile package.json dosyasının oluşturulması faydalı olacaktır.

Proje için package.json dosyasını adım adım oluşturmak için

npm init

komutu veya hızlıca oluşturmak için

npm init -y

komutu kullanılır.

Projede Grunt modüllerinin kullanılması için grunt paketinin indirilmesi gerekir.

Grunt modülünün projeye indirilmesi için

npm install grunt --save-dev

komutu kullanılır.

Grunt ve Grunt modülerini indirirken kullanılan –save-dev parametresi, indirilen paketlerin package.json dosyasına geliştirici bağımlılığı olarak eklenmesini sağlar.

Grunt kullanımı

Grunt görevleri Node.js Modül Yazmak ve Node.js module.exports yazısında yer alan modül yazımı gibi yapılır.

Grunt komut yorumlayıcısı çalıştırıldığında varsayılan olarak Gruntfile.js dosyasına baktığından görevleri Gruntfile.js dosyasına yazmak yaygın olarak yapılan bir işlemdir.

Grunt görevleri genellikle

module.exports = function (grunt) {

};

kodu içindeki fonksiyona yazılır.

Görev oluşturmak

Grunt çalıştırıldığında varsayılan olarak default görevini çalıştırır.

Varsayılan görev yazılmadığında Grunt uyarı verir. Varsayılan (default) görevin yazılması zorunlu değildir. Ancak yaygın olarak yazılmaktadır.

Grunt görevi oluşturmak için registerTask metodu kullanılır.

grunt.registerTask(gorevAdi, [gorevAciklamasi, ] gorevListesi);

Basit bir görev oluşturmak.

module.exports = function (grunt) {

  grunt.registerTask("gorev-adi", "Görev açıklaması", function () {

    grunt.log.write("Görev tamamlandı");

  });

};

Yazılan default görevi çalıştırmak için

grunt

veya özel bir görevi çalıştırmak için

grunt gorev-adi

komutu kullanılır.

Grunt görevleri ile ilgili bilgiler initConfig metoduna nesne parametresi olarak geçirilir.

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json")
  });

  grunt.registerTask("gorev-adi", "Görev açıklaması", function () {

    grunt.log.write("Görev tamamlandı");

  });

};

Grunt ayarlarının bulunduğu initConfig içerisindeki pkg özelliği zorunlu değildir.

Bu özellik (pkg) sayesinde package.json dosyasında bulunan bilgiler Grunt modüllerinde kullanılır.

Grunt çalıştırılacak görevler için modüler bir yapı sunar.

İhtiyaca göre farklı bir Grunt modülünün indirilmesi gerekebilir.

Grunt için yazılmış modüllere

gruntjs.com/plugins

adresinden ulaşılır.

NOT: Grunt geliştiricileri tarafından oluşturulan modüllerin başında yıldız simgesi bulunur.

Grunt modülleri

Grunt modüllerini indirmek için

npm install <modul-adi> --save-dev

komutu kullanılır.

Grunt uglify modülünü indirmek için

npm install grunt-contrib-uglify --save-dev

komutu kullanılır.

Grunt modüllerini NPM ile indirirken başında grunt olduğuna, Grunt geliştiricileri tarafından oluşturulan modüllerin ortasında contrib olduğuna ve modülün sonunda ise modülün kısa adının olduğuna dikkat edin.

Modülleri dahil etmek

Grunt modüllerini yazılan göreve dahil etmek için loadNpmTasks metodu kullanılır.

Modül dahil edildikten sonra registerTask metoduna parametre olarak geçirilerek kullanıma hazır hale getirilmeli, modül ayarları varsa initConfig metoduna gerekli olan ayar ve işlemler yazılmalıdır.

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    uglify: {
      jquery: {
        files: {
          "jquery.min.js": ["jquery.js"]
        }
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-uglify");

  grunt.registerTask("gorev-adi", "Görev açıklaması", ["uglify"]);

};

Modül için gerekli olan ayar ve işlemler her modül için farklılık göstermektedir.

Modül sayfasındaki dokümantasyona bakarak modül ayarları ve işlemleri hakkında detaylı bilgi alınabilir.

Grunt modüllerini öğrenmek için birkaç modül inceleyelim

JSHint

Modül JavaScript dosyalarındaki kodların standartlara uygun yazılıp yazılmadığını kontrol etmek için kullanılır.

Modülünü indirmek için

npm install grunt-contrib-jshint --save-dev

komutu kullanılır.

Modülü indirdikten sonra loadNpmTasks ile dahil edilir ve registerTask metoduna geçirilerek görev kuyruğuna alınır.

Görev için gerekli parametreler initConfig metoduna yazılır.

Aşağıdaki JavaScript kodlarının proje klasörü içerisindeki js klasörüne topla.js olarak yazıldığını varsayalım.

"use strict";

function topla(a, b) {    
  return a + b;
}

Yazılan JavaScript kodlarını doğrulamak için JSHint görevi yazalım ve çalıştıralım.

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    jshint: {
      files: ["js/topla.js"]
    }
  });

  grunt.loadNpmTasks("grunt-contrib-jshint");

  grunt.registerTask("default", "JavaScript hatalarını bul.", ["jshint"]);

};

Görevi yazıp çalıştırdığımızda bize hatalı yer ile ilgili uyarı verecektir.

Dosyada gerekli düzenlemeleri yapalım.

function topla(a, b) {
  "use strict";
  return a + b;
}

Artık JavaScript kodlarımız standartlara göre yazılmış oldu.

Her bir dosyayı ayrı ayrı yazmamak için aşağıdaki gibi

files: ["js/*.js"]

yıldız (*) karakteri kullanılabilir.

Uglify

Modül JavaScript dosyalarını sıkıştırmak için kullanılır.

Modülünü indirmek için

npm install grunt-contrib-uglify --save-dev

komutu kullanılır.

Modülü indirdikten sonra loadNpmTasks ile dahil edilir ve registerTask metoduna geçirilerek görev kuyruğuna alınır.

Görev için gerekli parametreler initConfig metoduna yazılır.

Aşağıdaki JavaScript kodlarının proje klasörü içerisindeki js klasörüne ekle.js olarak yazıldığını varsayalım.

var isimler = ["Yusuf", "Ramazan", "Sinan", "Mehmet"];

for (var sira = 0; sira < isimler.length; sira++) {

    isimler[sira] = isimler[sira] + " SEZER";

}

Yazılan JavaScript kodlarını doğrulamak ve sıkıştırmak için gerekli görevi yazalım ve çalıştıralım.

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    jshint: {
      files: ["js/*.js"]
    },
    uglify: {
      js: {
        files: {
          "js/dosya.min.js": ["js/*.js"]
        }
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-jshint");
  grunt.loadNpmTasks("grunt-contrib-uglify");

  grunt.registerTask("default", "JavaScript hatalarını bul ve sıkıştır.", ["jshint", "uglify"]);

};

Görev çalıştırıldığında js klasörü içerisindeki tüm JavaScript dosyalarını sıkıştırarak dosya.min.js dosyasına yazacaktır.

Sadece istenilen dosyaları sıkıştırmak için istenilen dosya adının yazılması yeterli olacaktır.

Modül dosyaları sıkıştırırken değişken adlarını da değiştirebilir. Bunun önüne geçmek için mangle seçeneğinin false olarak ayarlanması gerekir.

CSSmin

Modül CSS dosyalarını sıkıştırmak için kullanılır.

Modülünü indirmek için

npm install grunt-contrib-cssmin --save-dev

komutu kullanılır.

Modülü indirdikten sonra loadNpmTasks ile dahil edilir ve registerTask metoduna geçirilerek görev kuyruğuna alınır.

Görev için gerekli parametreler initConfig metoduna yazılır.

Aşağıdaki CSS kodlarının proje klasörü içerisindeki css klasörüne arkaplan.css olarak yazıldığını varsayalım.

body{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: crimson;
    color: black;
}

Yazılan CSS kodlarını sıkıştırmak için gerekli görevi yazalım ve çalıştıralım.

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    cssmin: {
      css: {
        files: {
          "css/dosya.min.css": ["css/*.css"]
        }
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-cssmin");

  grunt.registerTask("default", "CSS dosyalarını sıkıştırır.", ["cssmin"]);

};

Görev çalıştırıldığında css klasörü içerisindeki tüm CSS dosyalarını sıkıştırarak dosya.min.css dosyasına yazacaktır.

Sadece istenilen dosyaları sıkıştırmak için istenilen dosya adının yazılması yeterli olacaktır.

Modüllerin detaylı açıklamasına modül sayfalarındaki dokümantasyondan ulaşabilirsiniz.