Grunt Nedir?

Grunt bir javascript görev çalıştırıcısıdır. (Task runner) Grunt ile bir konfigürasyon dosyası yardımıyla, belli görevleri (sass dosyalarını css e çevirme, javascript dosyalarını birleştirme ve küçültme, css dosyalarına ön ek -prefix- ekleme) otomatik olarak yerine getirebilir. Bunun için ilgili grunt pluginlerini kurmanız ve Gruntfile.js adlı konfigürasyon dosyasında ayarlarını yapmanız yeterlidir.

Grunt nasıl kurulur?

Grunt’ı kurabilmek için önce sisteminizde nodejs yüklü olmalı. Nodejs ile gelen npm paket yöneticisi ile grunt’ı kurabilirsiniz.

Grunt’ı sisteminizde npm install -g grunt-cli komutunu vererek kurabilirsiniz.

Projede Grunt ayarları nasıl yapılır?

Grunt sistemde kurulduktan sonra, ayrıca proje klasöründe de kurulmalıdır. Bunun için öncelikle sisteminizi npm modüllerinin kurulabileceği şekle getirmeniz gerekir. Projenizde bir “package.json” dosyası bulunmuyorsa, npm init -y komutuyla, varsayılan değerlerle bir package.json dosyası oluşmasını sağlayabilirsiniz.

“package.json” dosyası oluştuktan sonra, grunt ve pluginlerini projede kurabilir ve ayarlamalarını Gruntfile.js dosyası içinde yapabilirsiniz. Burada her plugin için ayrı ayarlama gerektiği için, esas öğrenmeniz gereken ilgili plugin konfigürasyonu olacak.

.gitignore dosyası

Grunt ve grunt pluginlerini kurduğunuzda, ilgili projenin içindeki node_modules klasöründe yüklü miktarda dosya olacaktır. Bu dosyaları versiyon kontrolüne (git) eklemeniz, git repository boyutunu gereksiz yere şişirecektir. Bu yüzden node_modules klasörü .gitignore dosyasına eklenmeli ve repositorye eklenmemesi sağlanmalıdır. package.json dosyası zaten hangi dosyaların kurulacağı bilgisini tutuyor. Repositoryi alan kişi ayrıca proje klasöründe npm install diyerek npm paketlerini alabilmektedir.

.gitignore dosyasını oluşturmak için gitignore.io sitesini kullanabilirsiniz.

Örneğin benim genellikle wordpess, sass, postcss ve autoprefixer kullanan bir projede kullandığım gitignore dosyası: Örnek gitignore dosyası

Wordpress underscores.me (sassify seçeneği ile) için örnek bir Gruntfile.js dosyası

underscores.me ile oluşturulan bir tema için örnek gruntfile dosyası

Buradaki örnekte underscores.me içindeki tema adına “example-theme” ismi verildi ve bilgisayarımda “localhost/example-wp” üzerinden çalıştırıldı. (BrowserSync ayarlarındaki proxy: 'localhost/example-wp' buradan geliyor.)