May.27

npm Nedir ve Avantajları

Bir yazılım şirketinde veya ajansta çalışıyoruz. Sürekli olarak müşterilerimizin web sayfalarını tasarlamak ve/veya kodlamakla görevliyiz. Aynı zamanda da bir ekip ile birlikte çalışıyorsunuz. Projeyi başlatacak ve süreci takip edip belirli bir zaman periyodunda raporlayacak olan sizsiniz. Sizin burada ilk aşmanız gereken ilk görünürde 4 adet probleminiz olacak ve bu problemleri de npm ile çözeceğiz.

npm

npm (Node Package Modules), Node.js için bir takım script’lerin otomatik olarak indirilmesini, güncellenmesini, silinmesini sağlayan bir paket yöneticisidir. Komut Satırı (Command Port) üzerinden çalışır.

Problem 1: Angaryalar

Her hafta yeni bir projeyi başlatıyorsanız, her seferinde yeni bir proje klasörü açmak, gerekli kütüphaneleri eklemek, gerekli alt klasörleri açmak, index sayfası oluşturmak, versiyon dosyaları eklemek ve bir takım yapılandırıcı dosyaları hazırlamakla uğraşacaksınız. Ortalama olarak bu işi sizin iş hızınıza göre 1-3 saatlik bir zamanınızı alacak. Ayrıca oldukça sıkıcı ve angarya bir iştir.

Problem 2: Versiyonlama

Evet, projeye bir şekilde başladınız. Proje yapılırken, her akşam projenin yedeğini almak gerekebilir. Veya projeyi yayınladınız ama projede bir ekleme yaptınız. Her ekleme sonrasında bir minör versiyon atlatmanız gerekir. Her versiyonda da ne gibi değişiklikler yaptığınızı bir sistem ile belirtmeniz gerekir. İsterseniz verisyonlama sistemini bir kağıt üzerinde belirtin, ister bir Excel belgesinde, isterseniz de hiç belirtmeyin. Ancak ne yazık ki profesyonel anlamda global standartlara uygun projeler geliştirmeniz bekleniyorsa, versiyonlama konusunda dünya standartlarına uymanız gerekir. Yani Hindistan’da biri bir proje geliştirmiş ve bir versiyon tanımı yapmışsa, Canada’da ki bir geliştirici gelip de projeye dahil olduğunda, versiyon dosyasına bakıp projenin hangi aşamada olduğunu rahatlıkla anlayabilmeli. O dosyaya baktığında hangi sürüm olduğu, hangi kütüphanelerin eklenmesi gerektiğini, hangi otomatikleştirilmiş task’ların yer aldığını görebilmeli.

Aşağıda, Grunt (ileride göreceksiniz) için bir versiyon dosyası (package.json) görülmektedir.

{
   "name": "UGURGELISKEN.com",
   "description": "www.ugurgelisken.com için kişisel site.”,
   "version": "1.2.1-rc1",
   "author": {
      "name" : "Uğur GELİŞKEN", 
      "email" : "ugurgelisken@gmail.com"
   },
   "repository": {
       "type": "git",
       "url": "http://github.com/ugurgelisken/website.git"
   },
}

Problem 3: Derleme

Diyelim ki çok daha profesyonel bir yazılım ekibiyle çalışıyorsunuz. O kadar profesyonel olmuşlar ki artık JavaScript yazarken daha pratik olmak istiyorlar. Daha hızlı bir şekilde kod yazmaktan yanalar. Bu kişiler JavaScript yerine CoffeScript kullanır. Aynı şekilde CSS yerine de SASS kullanırlar. Her ikisinde tercihleri gereksiz yere operatör kullanmaktan kaçmak, on satırda kod yazmak yerine üç satırda kod yazmak için bu yöntemi kullanılır. Fakat ne yazık ki tarayıcıların hiç biri CoffeScript’i ve SASS’ı doğrudan çalıştıramaz. Tarayıcı sizden yine JavaScript ve CSS dosyaları bekler. O zaman bizim bir dönüştürme işlemi yapmamız gerekecektir. Yani CoffeScript’i JavaScript’e, SASS’ı da CSS’e derlemeliyiz.

Mesela aşağıda da bir stil.scss dosyası, stil.css dosyasına dönüştürülüyor.

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
    sass: {
        options: {
            sourceMap: true
        },
        dist: {
            files: {
                stil.css': stil.scss'
            }
        }
    }
});
grunt.registerTask('default', ['sass']);

Problem 4: Optimizasyon

Projede yüzlerce Grafik, JavaScript, CSS ve HTML/PHP gibi dosyalar hazırladığınızı düşünün. Bunların her birinin optimize edilmesi gerekir. Mesela grafik dosyaları 72 dpi’ya getirilmeli. Kod dosyaları arasındaki boşluklar silinmeli ve tek satır kod haline dönüştürülmeli. Böylece çok az miktarda da olsa (tabi kodların uzunluğuna göre değişir) dosya boyutu tasarrufu sağlanır ve bu dosyalar web üzerinde daha hızlı yüklenip çalıştırılabilir. Eğer aynı sayfada birden fazla CSS veya JavaScript dosyası varsa, bunlar da birleştirilip tek bir dosya haline getirilmeli.

Örneğin en basit haliyle optimize edilmiş bir CSS dosyası örneği şöyle olmalıdır:

Normal hali:

body{
padding:10px;
color:red;
}

Optimize edilmiş hali:

body{padding:10px;color:red;}

Gördüğünüz gibi Tab ve Enter karakterleri silinmiş. Kitabın konusu gereği Bootstrap kullandığınıza göre arayüz tasarımcısı veya arayüz programcısı görevinde olmanız muhtemeldir. Her ne kadar Bootstrap bir arayüz tasarımında yeterli gibi görünse de, asla yeterli olmayacaktır ve sizin de harici CSS’ler yazmanız gerekecektir. Bu gibi CSS’leri de proje yönetimi gereğince minimize etmek ve bütünleştirmek sizin sorumluluğunuzda olacaktır.

İçeriği paylaş:
  • facebook
  • twitter