Grunt Nedir?

Bir projenin ilk adımlarının atılmasından canlıya alınmasına değin pek çok süreçte küçük ve büyük pek çok görevin gerçekleştirilmesi ve pek çok standarda uyulması gerekir. Bu işlemler çoğu zaman task runner olarak ifade edilen görev çalıştırıcılarla işleme alınırlar.

AA

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 all1 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ır2. 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 JavaScript Task Runner

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ürasyonu3 Gruntfile dosyası4 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ı incelenebilir5. Grunt eklentilerini ise Grunt > Plugins sayfasından inceleyebilirsiniz. Eklentilere GitHub reposu6 ve NPM üzerinden7 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.