Selamlar, sizlere front end developerların işlerini kolaylaştıran Grunt’tan biraz geç de olsa bahsedeceğim. Grunt ile işleri otomatize edip işlerimizi daha hızlı çözebiliriz.
Öncelikle çok kolay bir kurulumu var. Ancak bilgisayarınızda nodejs olması gerekiyor. Yoksa http://nodejs.org adresinden hemen kurulum yapabilirsiniz.
Ardından terminalden;
npm install -g grunt-cli
komutunu çalıştırmanız yeterli. Artık grunt kuruldu. Şimdi işleri nasıl otomatize edeceğiz?
Öncelikle şuan sadece grunt kuruldu bilgisayarımıza. Şimdi kendimize, kullanmak istediğimiz pluginleri seçeceğiz. http://gruntjs.com/plugins adresinden arama yaparak bulabilirsiniz. Zaten grunt tarafından oluşturulmuş belli başlı pluginler var. Örneğin uglify ile js dosyamızın minify edilmiş halini çıktı alabiliriz.
Plugin işlerimlerini gruntfile.js içerisinde yapacağız. Bir de package.json dosyamız olacak ve bu dosya içerisinde kurduğumuz pluginlerin gereklilikleri bulunacak. package.json dosyasını oluşturmak için proje dizininde iken terminalden;
npm init
komutunu kullanabilirsiniz. Komutu çalıştırınca size isim, proje reposu vs. sorular gelecek onları girip ‘yes’ dedikten sonra ana dizinde package.json oluşacaktır.
Şimdi sıra bir task oluşturmakta. Clean plugini üzerinden örneklendirelim. Plugin sayfasındaki;
npm install grunt-contrib-clean --save-dev
komutu ile kurabiliriz.
Ardından gruntfile.js dosyamızı açıp;
module.exports = function(grunt){
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
//buraya task kodları gelecek
});
};
çalışmaya devam edebiliriz. Bir alt satırdaki “grunt.loadNpmTasks(‘grunt-contrib-clean’);” komutunu module.exports içerisinde yazmanız gerekiyor.
module.exports = function(grunt){
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
});
grunt.loadNpmTasks('grunt-contrib-clean');
};
dosyamızın son hali bu oldu.
Ardından plugin sayfasından kullanımına bakacağız. Her plugin farklı optionlarla geliyor bunun için plugin sayfasını incelemekte, sayfayı sürekli açık tutmakta fayda var.
Eğer bir default task tanımlamazsak grunt çalışmayacak hata verecek. Bunun için “grunt.registerTask(‘default’, [‘clean’]);” kullanacağız.
Dosyamızın son hali böyle oldu;
module.exports = function(grunt){
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('default', ['clean']);
};
Ve son olarak clean ne iş yapacak onu tanımlıyoruz. Kullanımını daha önce belirttiğim gibi plugin sayfasından bakabilirsiniz.
module.exports = function(grunt){
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
clean: {
js: ["js/*.js", "!js/*.min.js"]
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('default', ['clean']);
};
Terminalden proje dizinindeyken ‘grunt’ komutu ile çalıştırabilirsiniz. Sonuç olarak dizin içerisindeki js klasöründe bulunan, uzantısı .js olan dosyaları silecek fakat min.js olanlara dokunmayacaktır.
Ben sizlerle örnek dosya paylaşıyorum fakat içerisindeki node_modules klasörünü kaldırıyorum. Bu klasör sizin pluginleriniz arttıkça boyut olarak artacaktır fakat sizler gruntfile.js ve package.json olduğu için ‘npm i’ komutu ile node_modules klasörünü elde edebilirsiniz.
