Nedir Bu Npm, Bower, Grunt, Gulp, Yeoman

Selamlar;

Bu makalemizde adı geçen terimleri örnekler vererek mümkün olduğunca tanıtmaya çalışacağım. Günümüzde hız ve optimizasyon herşeydir. Özellikle web teknolojilerinde bu durum kaçınılmazdır. Web uygulamalarımızda çeşitli tasklar hazırlıyıp bunları belirlediğimiz durumlarda çalıştırıp web application’ımız için optimizasyonlar sağlıyabiliriz. Örneğin javascript dosyalarını minify etmek, css dosyalarını birleştirmek veya belli folderları cachelemek gibi daha birçok işte kullanılabilir.

Npm:

Npm aynı Nuget’de olduğu gibi Node.js için çeşitli scriptleri otomatik olarak sisteme yüklemek, listelemek, silmek, update etmek gibi işlere yarıyan, command prompt’tan çalışan bir uygulamadır. Eğer Npm makinada yok ise Node.js‘in yüklenmesi ile Npm de otomatik olarak gelmiş olur.

Npm yani Node Package Modules  ile örneğin gulp veya grunt kurmak istenir ise command prompt’a aşağıdaki örnekte olduğu gibi kodlar yazılır:

Yukarıda da gördüğünüz gibi diğer packageları kurabilmek için en önce Npm gerekmektedir. Bower için dahi önce Npm kurulu olması gerekir. Bower hakkında birazdan konuşacağız.

Birkaç önemli Npm komutundan bahsetmek istiyorum:

Esas belirlenen default yere ilgili paket’i aşağıdaki gibi yükler.

 

Belirlenen bir versiyon veya belli bir versiyondan yukarısı aşağıdaki gibi yüklenir.

 

package.json ile önceden yüklenecek paketlerin tanımlandığı file içindekiler yüklenir.

Örnek package.json:

Var olan bir paketin güncellenmesi aşağıdaki gibidir.

 

Var olan bir paketin silinmesi aşağıdaki gibidir.

Yüklü paketlerin Listesi aşağıdaki  komut ile görülebilir.

Örnek çıktı:

Bower:

Şimdi biraz da Bower hakkında konuşalım.

Bower aynı NPM gibi twitter tarafından geliştirilen bir paket yöneticisidir.

Öncelikle Bower’ı kurmak için alttaki komut yazılır. Görüldüğü üzere Bower’ı kurmak için NPM gerekmektedir.

Bower uygulaması Git versiyon sistemini kullandığı için pc’de Git yüklü olmalıdır..

Örnek kodlar:

Bower ile yüklenen paket ile ilintili başka dosyalar var ise default olarak o anda bulunulan dizinde bower_components adında bir folder oluşturur. Yüklenen tüm dosyalar bu dizin içerisinde alt dizinler olarak tutulur. Bu durumda versiyon belirtilmediği için istenilen dosyanın en son versiyonu yüklenmiş olur.

Belirli bir versiyona göre  paket yüklemek için aşağıdaki kod yazılır:

Belirtilen paket aşağıdaki komut ile silinir.

Paket aşağıdaki komut ile aranır.

Her bir web projesinde kullanılan dosyalar farklılık gösterebilir. Herbirini farklı yerlerde saklanması için bir paket tanımlayıcısı gerekmektedir. Bir bower paketinin kimliğini bower.json adındaki dosya oluşturu. Alttaki komut ile bu dosya oluşturulur. Bu dosya içerisinde, projenin developer bilgisi, versiyon bilgisi, versiyonun tutulduğu url bilgisi, buna bağlı dosya bilgileri veya lisans bilgileri daha birçok bilgi saklanmaktadır.

Örnek bower.json aşağıdaki gibidir:

Uygulamada geçen bağımlı dosyaları bower.json dosyaya dizi olarak yazdırmak için alttaki komut kullanılır.

Geliştirici bağımlı dosyaları yani devDependencies dosyaları yazdırmak için alttaki komut kullanılır.

Bower’a yüklü dosya listesini aşağıdaki komut ile alınır.

Bower, web projemizde kullanılan birden çok paket var ise çok faydalı olabilir. Versiyonlama ve her pakete göre farklı özellikleri tanımlamak için birebirdir. Bower hakkında daha detaylı bilgi için Bower’s Github sayfasına gidebilirsiniz..

Grunt:

Grunt belirlenen taskları çalıştıran bir yapıdır. Web geliştirme sırasında yapılacak operasyonları otomatikleştiren bir araçtır. Her seferinde yapılan değişiklik ile, css lerin cssmin gibi ufaltma işlemleri yapmak, imajları sıkıştırmak, javascriptleri temizleyip küçültmek ,birden fazla dosyayı tek bir dosya haline getirmek gibi işleri her defasında manuel olarak tekrarlanması mümkün değildir. İşte bu işlemleri her seferinde yapan ve otomatikleştiren uygulama Grunt’dır. Daha birçok amaca uygun grunt eklentileri vardır.

Grunt’ın çalışması için Node.js ve buna bağlı olarak NPM’in yüklü olması gerekir. Yükleme komutu aşağıda görüldüğü gibidir.

Yüklendiği ve versiyon bilgisi aşağıdaki gibi kontrol edilebilir.

Şimdi projenin kök dizininde bir package.json ve gruntfile.js dosyası oluşturalım. Grunt oluşturulan dosyaların blunduğu klasör içerisinde çalışır. Grunt’a erişmeden önce geçerli dizine gidilmesi gerekimektedir. Package ve Gruntfile lara göre gerekli işlem yapılır. Package.json oluşturmada amaç projenin bağımlı olduğu dosyaları yüklemek ve izlemektir. Bu dosya üzerinden istediğimiz node modüllerini tanımlayabilir, yükleyebilir ve izleyebiliriz.

Örneğin ben imageları sıkıştırma işelmini grunt ile yaptım. Öncelikle package.json dosyası folder’da yaratıp içine alttaki config’i yazdım.

Şimdi aşağıdaki yapıyı iyice öğrenin. Çünkü  vNext Mvc 6.0’da, Visual studio 2014’de artık project.json dosyası gelicek ve içeriği alttaki gibi olucak. Yani project dosyaları json olacak.

Alttaki komut bağımlılıkları var olan proje altında node_modules klasörü yaratarak içine yerleştirir.‘grunt-image-optimizer’. Böylece Grunt projeye eklenmiş olur.

Altta gerekli olan grunt-pngmin ve grunt-smushit packageları yüklenmiştir.

grunt-image-optimizer folder içine yukarda bahsettiğimiz gruntfile.js dosyası oluşturulur ve içine alttaki kodlar konur. Aşağıda upload kalasörü içindeki png ve jpg uzantılı resimler üzerinde işlem yapılarak sıkıştırılması sağlanmaktadır.

İlgili grunt script’i yani hazırladığımız grunt,js’i çalıştıran komut aşağıdadır.

İşte yukarıda gördüğünüz gibi belli bir folderdaki imageler grunt ile otomotize edilerek sıkıştırılır.

gulp-js

Gulp:

Gulp’da grunt gibi gerekli olan bir takım işleri otomatize eden  Node.js tabanlı bir komut satırı uygulamasıdır.

Alttaki komut ile yüklenir.

Yüklendiğini doğrulamak için alttaki kod yazılır.

Projeye ait dizinin altında alttaki komut yazılır ise Gulp aynı Grunt’daki gibi projeye dahil edilmiş olur ve proje altında node_mudules altında folder açarak dosyaları bunun içine atar.

Gulp’ın 400 yakın eklentisi vardır. Buradan tamamına erişebilirsiniz.

Öne çıkanları aşağıda görüldüğü gibidir.

Şimdi isterseniz tüm javascriptlerimizi tek bir javascript yapıp minify yapan bir örneği gulp ile yapalım.

Öncelikle bir temizleme işlemi yapalım. Yani herşeyi en baştan başlatalım.

gulp-clean: Herşeyi temizlemek için clean paketini indirelim.

Şimdi uygulamadaki tüm scriptleri birleştirip tek bir project.js haline getirelim.

gulp-concat: Javascriptleri birleştirmek için concat paketini indirelim.

Aşağıda görüldüğü gibi proje altındaki script klasöründeki tüm js’ler build klasör’ü altına project.js adı altında birleştirilerek konur.

Şimdi script’i minify edelim.

gulp-uglify: Script’i minify etmek için uglify paketini indirelim

Aşağıda görüldüğü gibi tüm scriptler build/project.js adı altında birleştirilmiş ve minify edilmiştir. Minify için pipe’a sadece uglify() methodu eklenmiştir.

Aşağıda uglify() methodu javascript’de yanlış bir kod varsa minify sırasında hata fırlatır. İşte isterseniz bunu da aşağıdaki gibi projectError.log dosyasına loglayalım.

Sanırım isiminide project.min.js olarak değiştirme vakti geldi.

gulp-rename: Script’in ismini değiştirmek için rename paketini indirelim. İlgili kod aşağıdadır.

Project.js’i project.min.js olarak değiştirelim.

Son olarak minify ettiğimiz script.js dosyasının boyutuna bakalım. Ben iki durum arasındaki yani minify ile minify olamama durumundaki farklı görmek istedim.

gulp-filesize:İlgili file’in size’ını öğrenmek için filesize paketini indirelim.

Aşağıda görüldüğü gibi project.js ve minify olduktan sonraki project.min.js dosya boyutları filesize() methodu ile bakılmıştır.

Tüm kod aşağıdaki gibidir: Sonuç olarak tüm scriptleri alınıp build/folder altına project.js adı altında toplanır. Daha sonra ilgili dosya minify edilip adı project.min.js olarak değiştirilir. Minify’dan önceki ve sonraki file sizelara bakılır. Hata durumunda  projectError.log dosyasına kaydedilir.

Yukarıda görüldüğü gibi gulp bence özellikle syntax’ındaki kolaylığı ile çok kullanışlı bir uygulama. Ayrıca bu kadar kısa zamanda 400’e yakın plugin olması harika. Grunt’a göre Gulp bana daha yakın geldi.

Yeoman:

Yeoman command-line arayüzü ile node.js kullanan yo komutu ile pluginleri çağıran google tarafından geliştirilmiş bir uygulamadır. Aşağıdaki komut ile yüklenir.

yeoman

Belirlenen indirilmiş paketlerin yo komut ile çalıştırılmasında (Grunt ve Gulp) gibi uygulamalar kullanılır. Paket yönetiminde (Bower ve Npm) gibi uygulamalar kullanılmaktadır.

Yeoman ile angularjs kullanımına bir örnek vermek istersek:

Öncelikle angularjs yüklenir.

Daha sonra uygulama içinde bir directory açılır ve uygulama yo komutu ile çalıştırılır.

Yeoman’de kullanılan uygulamamızı çeşitli özelleştirmeler  yapabileceğimiz generatorlar vardır. Aşağıda bunla ilgili örnek gözükmektedir.

AngularJS frameworkünde ,uygulamamız birçok parçadan oluşabilir. Bunlar controllers, directives and filters gibi parçalardır. Bu parçalar gibi daha birçoğunu aşağıda görüldüğü gibi çeşitli parametrelere atayabiliriz. Sonra da üzerinde istediğimiz işlemleri gerçekleştirebiliriz.

Yeoman aslında tüm yukarıda bahsettiğimz paketleri kolayca yönettiğimiz bir uygulamadır. Daha detaylı bilgiyi ve örnekleri burdan edinebilirsiniz.

Yukarıda bahsettiğimiz tooların tamamı modern web uygulamaları geliştirmenin temel bileşenleriden bazılarıdır. Hepsi işimizi hızlandırmak ve manuel yaptığımız birçok işi otomotize etmeye yaramaktadır. İlerde karşımıza bolca çıkacak gibi görünen bu uygulamalara şimdiden aşina olmanızı tavsiye ederim. Okuduğum ve takip ettiğim birçok vNext Mvc 6.0 ve Asp.Net seminer ve kaynaklarda, bu konular üzerinde sıkça durulmaktadır.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

12 Yanıt

  1. veli diyor ki:

    Hocam ağzınıza sağlık;
    Ben de birçok kere bu terimler ile karşılaşmıştım. Bütün hepsi üzerinden çok güzel örnekler vermişsiniz.
    Bunu hap şeklinde yutmak engüzeli:)

  2. baran diyor ki:

    Hocam elinize sağlık;
    Özellikle javascriptleri birleştirip minify etmek ve imaj dosyalarını sıkıştırmak zaten benim de ençok kullandığım yapılardı. Örnekler çok can alıcı teşekkürler. Bu arada bence de Gulp hocam..

  3. cem diyor ki:

    Hocam teşekkürler;

    Herkes parça parça yazmış. Şöyle derli toplu gördüğüm bu konulardaki en güzel türkçe kaynak.
    İyi varsınız hocam..

  4. murat diyor ki:

    Elinize sağlık hocam;

    Herşey bilgi ile alkalı cem. En sade şekilde birşeyi öğretebilmek için en karmaşık ve zor şekilde öğrenmek gerekir.Sadelik bilgeliktir. Bora hocam böyle nekadar sade derli toplu anlatıyorsa, bir o kadar da emek ve tecrube kendisinde bulunuyor..

  5. mehmet diyor ki:

    Yazı için teşekkürler. sade ve açıklayacı olmuş.
    yalnız bir sorum var; terminal kodları görüyorum, dolayısıyla bu işlemleri windows da yapamıyor muyuz? illa mac mi?

    • borsoft diyor ki:

      Selam Mehmet;
      Anlattığım makalenin tamamı Windows7 işletim sistemi altında yapılmıştır.

      İyi çalışmalar.

  6. Hasan URAL diyor ki:

    Ellerinize sağlık.
    Anlatımınızda ki sadelik ve verdiğiniz örneklerde ki kullanışlılık olarak mest eden bir yazı olmuş. An itibari ile artık sıkı bir takipçinizim.
    Her şey için teşekkürler.

  7. Şeref diyor ki:

    Böyle bir yazı yorumsuz kalmamalı…

    Anlatım için teşekkür ederim. Emeğinize sağlık.

  8. Emre diyor ki:

    Çok yararlı bir yazı olmuş. Emeğinize sağlık.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir