JavaScript

Grunt Nedir?

Yayın:
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 ...
GÖRSEL
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. 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 Nedir?

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 JavaScript Task Runner

Grunt Nedir?

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 yaza dizin değişikliği olması durumunda Grunt görevlerinin tetiklenmesini sağlar. Watch, tüm Grunt task’i işleme alır, be 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.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.