Ana içeriğe geç

Grunt'a Başlıyalım!

Grunt ve Grunt eklentileri, npm üzerinden, Node.js paket yöneticisiyle kurulmakta ve yönetilmektedir. Grunt 0.4.x, kararlı Node.js sürümleri >= 0.8.0 gerektirir.

bilgi

Grunt'ı kurmadan önce, npm 'nin güncel olduğundan emin olun; bunun için npm update -g npm komutunu çalıştırın (bu bazı sistemlerde sudo gerektirebilir).

Eğer Grunt'ı zaten kurduysanız ve hızlı bir referans arıyorsanız, lütfen Gruntfile örneğimize ve bir görevin nasıl yapılandırılacağına göz atın.

CLI'yi Kurma​

Grunt 0.3 Kullanıyor musunuz? Lütfen Grunt 0.3 Notları 'na bakın.

Başlamak için, Grunt'ın komut satırı arayüzünü (CLI) global olarak kurmak isteyeceksiniz. Bunu yapmak için sudo kullanmanız (OSX, *nix, BSD vb. için) veya komut satırınızı Yönetici olarak çalıştırmanız (Windows için) gerekebilir.

npm install -g grunt-cli

Bu, grunt komutunu sistem yolunuza ekleyecek ve herhangi bir dizinden çalıştırılmasına olanak tanıyacaktır.

Not: grunt-cli'yi kurmanın, Grunt görev koşucusunu kurmadığını unutmayın! Grunt CLI'nin görevi basittir: yanındaki bir Gruntfile ile kurulu olan Grunt sürümünü çalıştırmaktır. Bu, aynı makinede birden fazla Grunt sürümünün aynı anda kurulu olmasına olanak tanır.

CLI'nin Çalışma Şekli​

Her grunt çalıştırıldığında, yerel olarak kurulmuş bir Grunt'ı node'un require() sistemi ile arar. Bu nedenle, projenizdeki herhangi bir alt klasörden grunt çalıştırabilirsiniz.

Yerel olarak kurulu bir Grunt bulunduğunda, CLI yerel Grunt kütüphanesini yükler, Gruntfile'ınızdan yapılandırmayı uygular ve çalıştırmasını istediğiniz görevleri yerine getirir. Gerçekten ne olduğunu anlamak için kodu okuyun.

Mevcut Bir Grunt Projesi ile Çalışmak​

Grunt CLI'nin kurulu olduğunu ve projenizin zaten bir package.json ve Gruntfile ile yapılandırılmış olduğunu varsayarsak, Grunt ile çalışmaya başlamak oldukça kolaydır:

  1. Projenizin kök dizinine geçin.
  2. Proje bağımlılıklarını npm install komutuyla kurun.
  3. Grunt'ı grunt komutuyla çalıştırın.

Tip: Gerçekten de bu kadar basit. Kurulu Grunt görevlerini grunt --help komutunu çalıştırarak listeleyebilirsiniz, ancak genellikle projenizin belgeleriyle başlamak iyi bir fikirdir.

Yeni Bir Grunt Projesi Hazırlama​

Tipik bir kurulum, projenize iki dosya eklemeyi içerir: package.json ve Gruntfile.

package.json​

package.json: Bu dosya, npm tarafından yayımlanan projelerin metadata'sını saklamak için kullanılır. Bu dosyada projenizin ihtiyaç duyduğu grunt ve Grunt eklentilerini devDependencies olarak listeleyeceksiniz.

Gruntfile: Bu dosya Gruntfile.js veya Gruntfile.coffee olarak adlandırılır ve görevleri yapılandırmak veya tanımlamak ve Grunt eklentilerini yüklemek için kullanılır. Bu belgelerde bir Gruntfile bahsedildiğinde, ya bir Gruntfile.js ya da Gruntfile.coffee dosyasından bahsedilmektedir.

package.json​

package.json dosyası, projenizin kök dizininde, Gruntfile ile yan yana yer almalı ve proje kaynaklarınızla birlikte sürüm kontrol sistemine eklenmelidir. package.json dosyasının bulunduğu aynı klasörde npm install komutunu çalıştırmak, listedeki her bağımlılığın doğru sürümünü kuracaktır.

Projeniz için bir package.json dosyası oluşturmanın birkaç yolu vardır:

  • Çoğu grunt-init şablonları otomatik olarak proje spesifik bir package.json dosyası oluşturacaktır.
  • npm init komutu temel bir package.json dosyası oluşturur.
  • Aşağıdaki örnekle başlayarak, gerektiği gibi genişletebilirsiniz, bu şartnameyi takip ederek.
{
  "name": "my-project-name",
  "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"
  }
}

Grunt'ı ve Grunt Eklentilerini Kurma​

Mevcut bir package.json dosyasına Grunt ve Grunt eklentilerini eklemenin en kolay yolu npm install --save-dev komutudur. Bu sadece ``'ü yerel olarak kurmakla kalmaz, aynı zamanda bunu otomatik olarak devDependencies bölümüne ekler ve [tilde sürüm aralığını] kullanır.

npm install grunt --save-dev

Aynı şey Grunt eklentileri ve diğer node modülleri için de yapılabilir. Aşağıdaki örnekte JSHint görev modülü kurulumunu görüyorsunuz:

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

Projenizde kurulu ve kullanılabilir mevcut Grunt eklentilerine plugins sayfasından göz atın.

İşiniz bittiğinde, güncellenmiş package.json dosyasını projenizle birlikte sürüm kontrol sistemine eklemeyi unutmayın!

Gruntfile​

Gruntfile.js veya Gruntfile.coffee dosyası, projenizin kök dizininde package.json dosyasıyla yan yana bulunan geçerli bir JavaScript veya CoffeeScript dosyasıdır ve proje kaynaklarınızla birlikte sürüm kontrol sistemine eklenmelidir.

Bir Gruntfile aşağıdaki parçalardan oluşur:

  • "wrapper" fonksiyonu
  • Proje ve görev yapılandırması
  • Grunt eklentilerini ve görevlerini yükleme
  • Özel görevler

Bir Örnek Gruntfile​

Aşağıdaki Gruntfileda, proje metadata'sı projenin package.json dosyasından Grunt yapılandırmasına aktarılır ve grunt-contrib-uglify eklentisinin uglify görevi, bir kaynak dosyasını küçültmek ve bu metadata kullanarak dinamik bir banner yorumu oluşturmak için yapılandırılır. grunt komutu komut satırında çalıştırıldığında, varsayılan olarak uglify görevi çalıştırılacaktır.

module.exports = function(grunt) {

  // Proje yapılandırması.
  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'
      }
    }
  });

  // "uglify" görevini sağlayan eklentiyi yükleyin.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Varsayılan görev(ler).
  grunt.registerTask('default', ['uglify']);

};

Artık tüm Gruntfile'ı gördüğünüze göre, bileşen parçalarına göz atalım.

"Wrapper" Fonksiyonu​

Her Gruntfile (ve Grunt eklentisi) bu temel formatı kullanır ve tüm Grunt kodunuz bu fonksiyonun içinde belirtilmelidir:

module.exports = function(grunt) {
  // Burada grunt ile ilgili işlemler yapın
};

Proje ve Görev Yapılandırması​

Çoğu Grunt görevi, [[grunt.initConfig|grunt#grunt.initconfig]] yöntemine geçirilen bir nesnede tanımlanan yapılandırma verilerine bağlıdır.

Bu örnekte, grunt.file.readJSON('package.json') ifadesi package.json'da saklanan JSON metadata'sını Grunt yapılandırmasına aktarmaktadır. `` şablon dizgeleri, yapılandırma özelliklerine atıfta bulunabileceğinden, dosya yolları ve dosya listeleri gibi yapılandırma verileri, tekrarlamayı azaltmak için bu şekilde belirtilebilir.

Yapılandırma nesnesinin içinde herhangi bir rastgele veri saklayabilirsiniz ve bu, görevlerinizin gerektirdiği özelliklerle çakışmadığı sürece göz ardı edilecektir. Ayrıca, bu JavaScript olduğundan, JSON ile sınırlı kalmazsınız; bu alanda geçerli herhangi bir JS kullanabilirsiniz. Gerekirse, yapılandırmayı programlı olarak da oluşturabilirsiniz.

Çoğu görevin aksine, grunt-contrib-uglify eklentisinin uglify görevi, yapılandırmasının aynı adla belirtilmesini bekler. Burada, banner seçeneği, tek bir kaynak dosyasını tek bir varış dosyasına küçülten bir build adında tek bir uglify hedefi ile birlikte belirtilir.

// Proje yapılandırması.
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'
    }
  }
});

Grunt Eklentilerini ve Görevlerini Yükleme​

Concatenation, minification ve linting gibi yaygın olarak kullanılan birçok görev, grunt eklentileri olarak mevcuttur. Bir eklenti package.json içinde bir bağımlılık olarak belirtildiği ve npm install ile kurulduğu sürece, Gruntfile'ınızda basit bir komutla etkinleştirilebilir:

// "uglify" görevini sağlayan eklentiyi yükleyin.
grunt.loadNpmTasks('grunt-contrib-uglify');

Not: grunt --help komutu mevcut tüm görevleri listeleyecektir.

Özel Görevler​

Grunt'ı bir veya daha fazla görevi varsayılan olarak çalıştıracak şekilde yapılandırabilirsiniz; bunun için bir default görevi tanımlamanız gerekir. Aşağıdaki örnekte, komut satırında grunt çalıştırmak, uglify görevini çalıştıracaktır. Bu, grunt uglify veya hatta grunt default çalıştırmakla işlevsel olarak aynıdır. Dizi içinde herhangi bir sayıda görev (argümanlarla veya argümansız) belirtilmesi mümkündür.

// Varsayılan görev(ler).
grunt.registerTask('default', ['uglify']);

Projeniz, bir Grunt eklentisi tarafından sağlanmayan görevler gerektiriyorsa, özel görevleri doğrudan Gruntfile içinde tanımlayabilirsiniz. Örneğin, bu Gruntfile, yapılandırma bileşeni bile kullanmayan tamamen özel bir default görevini tanımlar:

module.exports = function(grunt) {

  // Çok temel bir varsayılan görev.
  grunt.registerTask('default', 'Bazı şeyleri kaydet.', function() {
    grunt.log.write('Bazı şeyleri kaydediyor...').ok();
  });

};

Proje spesifik özel görevler Gruntfile'de tanımlanmak zorunda değildir; bunlar harici .js dosyalarında tanımlanabilir ve [[grunt.loadTasks|grunt#grunt.loadtasks]] yöntemiyle yüklenebilir.

Daha Fazla Okuma​

  • [[Installing grunt]] kılavuzu, belirli, üretim veya geliştirme sürümlerinin Grunt ve grunt-cli'yi kurmaya dair ayrıntılı bilgiler içermektedir.
  • [[Configuring Tasks]] kılavuzu, Gruntfile içinde görevlerin, hedeflerin, seçeneklerin ve dosyaların nasıl yapılandırılacağına dair derin bir açıklama ile şablonlar, globlama desenleri ve dış verilerin aktarımı hakkında bilgi vermektedir.
  • [[Creating Tasks]] kılavuzu, Grunt görevlerinin türleri arasındaki farkları listelemekte ve birçok örnek görev ve yapılandırmayı göstermektedir.
  • Özel görevler veya Grunt eklentileri yazma hakkında daha fazla bilgi için [[developer documentation|grunt]] sayfasına göz atın.