Grunt.js minify etme
Merhaba yazdığım ilk blog yazısı olduğundan biraz eksikler olabilir 😊 Kusura bakmayın. İlk yazıda projelerinizde kullandığınız js, css vb. Dosyaları Grunt.js kullanarak nasıl min hale getirebileceğimizi göstereceğim.
Visual Studio’da GruntBlog adında yeni bir ASP.Net Core Web Application projesi oluşturuyoruz.
Açılan ekrandan MVC projesi seçiyoruz. Daha sonra projemize package.json adında bir npm config dosyası ekliyoruz.
Oluşan config dosyasının içeriği resimdeki gibidir.
Şimdi devDependencies kısmına Grunt.js’de kullanmak istediğimiz modülleri ekliyoruz. Ben aşağıya modülleri ve açıklamalarını ekledim. Projenize uygun olanları istediğiniz şekilde ekleyebilirsiniz.
Modülleri eklediğimizde projemizin dizininde bulunan npm klasörü restore edilmelidir. Çünkü grunt için gerekli olan modüller projeye yüklenmelidir.
NOT: Yükleme esnasında eklediğim yorum satırlarını eklemeyin 😊
Yükleme detaylarını Visual Studio’daki Output ekranından görebilirsiniz. Ayrıca yükeleme bittiğinde npm klasöründe config dosyasına eklediğimiz modüller eklenmiş olacaktır.
Bu kadar ayar yaptıktan sonra artık kod yazmaya geçebiliriz 😊 İlk olarak Grunt modüllerini yönetebileceğimiz kodları yazmak için Grunt.js adında bir javascript dosyası oluşturuyoruz.
Gruntfile.js içerisine basit bir task oluşturuyoruz.
Oluşturduğumuz Task’ları kullanabilmemiz için ”Extension and Updates” seçeneğinden bir Task runner yüklüyoruz.
Artık Task runner explorer sayesinde yazdığımız task ı control edebiliriz.
Görüldüğü gibi console ekranına Hello world! Mesajını Verdi.
Bir adet js ve jsmin isminde projemize boş klasör ekliyoruz. js klasörü içerisine bir js dosyası oluşturuyoruz ve içerisine basit bir toplama fonksiyonu yazıyoruz.
Artık yazdığımız js kodunu minify etmeye geldi sıra 😊
Yukarıda da belirttiğim gibi bu işlemi yapabilmek için grunt-contrib-uglify modülünü kullanmamız gerekiyor. Gruntfile.js dosyasına modülü yüklüyoruz. Ve gerekli kaynak klasör ve hedef klasörü belirliyoruz.
Task runner’dan uglify seçeneğini çalıştırdığımızda jsmin klasörüne js dosyası içerisindeki kodlar minify edilerek oluşturulacaktır.
Görüldüğü gibi js dosyamızın içerisindeki kodlar minify hale getirildi. 😊
Umarım yazının yararı olmuştur. 😊
