Grunt Nedir?

Grunt bu gibi görevlerin gerçekleştirilmesinde kullanılan araçlardan biridir. Ayrıca, task runner alternatifleri, olumlu-olumsuz yanlarıyla ilgili olarak A universal task runner to run them all¹ başlıklı yazıyı ayrıca öneririm. O halde, ilk olarak bir görev çalıştırıcının ne olduğuna bakalım.

Task Runner

Görev çalıştırıcı veya görev koşucusu (task runner), yazılım / uygulama geliştirme süreçlerinde ihtiyaç duyulan, tekrarlanan, belirli zamanlarda işleme alınması gereken görevlerin (compiling, minification, linting, bundling, livereload…) tanımlı kurallar çerçevesinde uygulanmasını sağlayan araçlardır². Bu görevler belirli bir yazım kuralı (syntax) gözetilerek tanımlanır ve görev odaklı eklentiler aracılığıyla işlenirler.

Grunt

Grunt bir JavaScript görev çalıştırıcısıdır ve NPM modülüdür. NPM / Yarn aracılığıyla indirilebilir ve yönetilebilir.

npm install grunt --save-dev
# ya da
yarn add grunt

Grunt ayrıca kendi komut satırı arayüzüne (CLI) de sahiptir.

npm install -g grunt-cli
# ya da
yarn add grunt-cli

Grunt işlem sürecinde package.json ve Gruntfile ile ilişikili olarak işleme alınır. Gruntfile dosyası Gruntfile.js veya Gruntfile.coffee olabilir. Örnek bir package.json Grunt eklentileriyle şu şekilde görünür:

{
  "name": "proje-adi",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Görev tanımlanmış (örneğin, uglify ve jshint eklentileri) örnek bir proje konfigürasyonu³ Gruntfile dosyası⁴ ise şu şekilde görünür:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint', 'uglify']);
};

Grunt eklentileri (modüller) de npm aracılığıyla proje dizinine indirilir.

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

Kurulum ve tanımlama işlemlerine dair daha detaylı bilgi için Grunt > Getting started sayfası incelenebilir⁵. Grunt eklentilerini ise Grunt > Plugins sayfasından inceleyebilirsiniz. Eklentilere GitHub reposu⁶ ve NPM üzerinden⁷ de ulaşmak mümkün. Özellikle öne çıkan eklentilerden bahsetmek gerekirse;

• Uglify, JavaScript dosyalarını minify edilmesi işlemini gerçekleştirir.
• SASS, adından da anlaşılabileceği üzere SASS dosyalarını otomatik bir şekilde CSS dosyalarına compile eder.
• Concat, CSS ve JS dosyaların birleştirilerek tek bir dosya haline getirilmesi işlemini gerçekleştirir.
• Imagemin, PNG, JPG, GIF ve SVG dosyalarını sıkıştırır.
• Watch, bir gözcü olarak herhangi bir dosya yazma - dizin değişikliği olması durumunda Grunt görevlerinin tetiklenmesini sağlar. Watch, tüm Grunt task’i işleme alır, bu sebeple derlemeler yinelenir. Newer ise yeni işlemleri kapsar.

Gruntfile içerisinde tanımlanan dosyalar tek tek ya da toplu olarak işleme alınabilir. grunt.registerTask() ile tanımlanan taskları CLI aracılığıyla işleme alalım:

grunt
grunt deploy
grunt uglify
grunt [diger-task]

Grunt sahip olduğu eklentiler ile ihtiyaç duyulan pek çok işlemi kolaylıkla uygulayabilir. Diğer yandan, süreç içerisinde farklı gereksinimler de söz konusu olmuş ve bu sebeple yeni task runner alternatifleri de kullanılmaya başlanmıştır. Grunt’a alternatif olarak öne çıkan runner’lardan biri de Gulp’tur.