famous-angular-logos

Famo.us / Angular Örnek Şablon

GIT

Git Downlaod

Eğer bilgisayarda kurulu değilse, bu adresten git dosyasını indirip kurmak gerekiyor. Git sayesinde çalışmamızı versiyonlayabiliriz. Yaptığımız her güncellemeyi kayıt altında tutmamız sayesinde içimize sinmeyen bir bölüm olduğunda kod temizlemek yerine son versiyona dönebiliriz.

Proje Klasörünün oluşturulması ve Git Eklenmesi

Konsol üzerinden çalışma yapacağımız klasöre ulaştıktan sonra git init yazarak git’i projeye dahil etmemiz gerekiyor.

Ek Bilgi
Konsol üzerinden dosya oluşturma komutunu mkdir dosyaAdi şeklinde kullanarak oluşturabiliriz.

Oluşturduğumuz klasöre giriş yapmak için cd dosyaAdi komutunu kullanabiliriz.

Bu aşamadan sonra git init yazdığımızda git projeye dahil edilmiş olur.

NPM

Npm bir paket yöneticisidir. Bower, grunt, gulp, less, karma gibi paketleri kolaylıkla eklememizi sağlar. NPM, Node Packaged Modules demektir. Node Paketlenmiş Modülleri.

Npm ve Bower’ı kullanmanın en güzel yanlarından biride, dosyalarımızı bir yerden başka bir yere taşırken, kurulum yapılan tüm dosyaları taşımak zorunda kalmamamız. Npm ve bower .json uzantılı dosyalar oluştururlar ve bizde bu sayede geçiş yaptığımız yeni bilgisayarda npm install gibi basit bir kodla tüm paketlerimizi tekrar kurabiliriz.

Npm kullanmanın diğer güzel yanı ise birden çok kişiyle çalıştığımız projelerde, diğer arkadaşlarımız ile paketlerin aynı versiyonunu kullanmamızdır.

Npm’in Projeye Eklenmesi

Öncelikle Npm’i kullanabilmemiz için bilgisayarımızda NodeJS kurulu olması gerekir. https://nodejs.org/ adresinden nodejs’i indirip kurabiliriz. Bu aşamadan sonra konsolumuzda npm komutlarını kullanabiliriz.

Konsola npm init yazıp enter’a bastığımızda, bizden projemizle ilgili bazı bilgiler ister. Proje ismi, şuanki versiyonu, proje açıklaması gibi istersek buraya projemizle ilgili detaylı bilgiler girebiliriz.

Bu aşamada proje klasörümüz içerisine package.json adında bir dosya oluşacaktır.

package.json ile ilgili
Bu dosya projemize npm ile eklediğimiz paketlerin, isim ve versiyon bilgisini tutar.

Ayrıca npm init sırasında girdiğimiz proje bilgilerini de burada görebilirsiniz.

Eklediğimiz paket bilgileri bu dosyada devdependencies ve dependencies kısmında bulunur.

Paket yüklemesi için npm install bower — save-dev komutunu kullanmamız gerekecektir. Bu komut bower paketini projeye ekleyecektir ve sadece yazılım geliştirme sırasında bower paketine ihtiyacımız olduğunu belirtir. Bu durumu komutun sonundaki — save-dev kısmı ile belirtrmiş oluruz. Npm ile kurduğumuz paketlerde -dev komutunu eklemekte fayda var. Burada bower yerine biz kurmak istediğimiz paket ismini girmemiz gerekir.

Bu işlem proje klasörümüz içine node_modules adında bir klasör oluştur ve içerine bower paketini yükler. Bundan sonra npm ile yüklediğimiz tüm paketler bu klasör içerisine yüklenecektir.

Diğer tüm plugin’ler için https://www.npmjs.com/ bu adreste arama yapabilirsiniz.

Bower

Bower, çok sık duyduğumuz bootstrap framework’ü gibi twitter tarafından geliştirilmiştir. Normalde örneğin bootstrap framework’ünü projemizde kullanmak istersek, http://getbootstrap.com/ adresine gidip bootstrap’i indirip proje klasörümüze kopyalamamız gerekmekte. Ama bower sayesinde bootstrap gibi css frameworklerini, jquery gibi js frameworklerini bir kaç komutla projemize dahil edebiliriz.

Ayrıca açık kaynak olarak hazırlanmış bir çok güzel js framework’üne bower search ile ulaşabiliriz.

Bower’in Projeye Eklenmesi

Npm’de olduğu gibi bower’da nodejs’in sisteminizde kurulu olmasına ihtiyaç duyar. Aynı zamanda git’de kurulu olmalıdır bilgisayarınızda. Bower’ı bilgisayarınıza global olarak kurmak isterseniz npm install -g bower komutu ile bunu yapabilirsinz. -g (global) kısmı proje dahilinde değil bilgisayar genelinde bower kurulmasını sağlar.

Bower’ı projeye eklemek için git ve npm’de olduğu gibi öncelikle konsola bower init yazmak gerekiyor. Bu aşamada yine proje ismi, şuanki versiyonu, proje açıklaması gibi bilgiler istenecektir. Bu kısım ile uğraşmak istemezsek tümünü enter ile geçebiliriz.

Proje kısmında bower.json dosyası oluşacaktır. Yine bu dosyaya baktığımızda bower init sırasında girdiğimiz proje bilgilerini göreceğiz.

Eğer bower ile bir paket kurmayı denersek; bower install angular — save gibi, yine dependencies bölümünde bu paketlerin versiyonları ile birlikte listeleneceğini görebiliriz.

Bower’da paket aramalarını hem konsol üzerinden hemde http://bower.io/search/ adresinden yapabiliriz. Konsol üzerinden yaparken bower search slider şeklinde kullanabiliriz. Slider yerine aradığınız paket ismini yazabilirsiniz.

Gulp

Gulp yapılması önemli olan ama çoğu kişinin yapmaya üşendiği işleri otomatize etmemize yarayan bir araçtır. Aynı zamanda bu bize çalışırken zamanda kazandıracaktır.

Yine nodejs kurulu olması gerek bilgisayarımızda gulp için. Zaten kurulumunu npm ile yapacağımız için kurulmuş olması gerekir.

npm install -g gulp komutu bilgisayarımıza global olarak gulp kurulumu yapar. Projeye eklemek için npm install gulp — save-dev komutunu kullanabiliriz. Artık package.json dosyamızda dependencies bölümünde bower’a ek olarak gulp’ı da görüyor olacağız.

Gulp İle Yapacaklarımız

  • LESS ile yazdığımız css kodlarımızı tek bir CSS dosyasında toplayıp, bu dosyayı da minimize edeceğiz.
  • Js dosyalarımızı tek bir dosyada toplayıp yine minimize edeceğiz.
  • Kod değişikliklerimizi inceleyip her kayıt sonrası kodu otomatik olarak yayına hazırlayacağız.
  • Proje kontrolü için local bir sunucu oluşturacağım.
  • Projemizde html, css ya da js dosyalarından biri değiştiğinde, biz tarayıcıya gidip sayfayı yenilemeden, otomatik yenilenmesini sağlayacağız.

İlk Commit

  • Şimdi bu aşamada ilk commit’i yapacağım için git ile ilgili önemli bir kaç düzenleme daha yapacağım.
  • Şuanda proje klasörümüzde bower_components klasörü de var. Bower’ın paketler bu klasöre kurmasını istemiyorsak proje klasörümüze .bowerrc isminde bir klasör oluşturup içerisine { “directory”: “src/components” } yazabiliriz. Artık belirttiğimiz klasöre yapacaktır kurulumları. Bower için diğer konfigürasyon bilgilerine http://bower.io/docs/config/ bu adresten ulaşabiliyoruz.
  • Git ile versiyonlama yaparken git’e dahil olacak ve olmayacak dosya ve klasörleri belirtebileceğimiz bir özellik var. Bunun için proje klasörümüze .gitignore adında bir dosya oluşturuyoruz. .gitignore dosyasının içine versiyonlamaya dahil olmayacak klasörleri seçiyoruz. Ben node_modules, src/components ve build klasörlerini ekledim. Çünkü bu dosyalar daha sonrada kolaylıkla oluşturulabilen sürekli versiyonlanması gerekmeyen dosyalar.
  • Şimdi konsola git status yazarak ilk commit’e dahil olacak dosyaları (yeni eklenmiş dosyalar, bir önceki commit’ten sonra üzerinde değişiklik yapılmış dosyalar gibi) görebiliriz.
  • Bunu da kontrol ettikten sonra git add -A komutu ile bu yeni dosyaları commit’lemek üzere staging area denilen bölüme dahil ediyoruz. Bunu yapmazsak yapacağımız commit boş olacaktır. -A komutu yeni eklenen ve değişikliğe uğrayan tüm dosyaları dahil etmek için kullanılır. Burada eğer istersek belli dosyaları da seçebiliriz.
  • Son olarak git commit -m “Bu benim ilk commit’im” komutu ile ilk commit’imizi oluşturabiliriz.
  • Oluşturduğumuz tüm commitleri kontrol etmek için ise git log komutunu kullanabiliriz. Bu komutu yazdığımızda daha önce oluşturduğumuz tüm commit’ler listelenir.
  • Şu aşamada git status komutunu tekrar çalıştırırsak bize değiştirilmiş ya da yeni eklenmiş bir dosya ya da klasör göstermeyecektir. Artık ekleyeceğimiz yeni bölümler üzerinde çalışmaya devam edebiliriz.

Projede Kullanacağımız Gulp Araçları

Bizim için en önemli dosyalar js ve less dosyalarının yönetimi olacaktır. Bu dosyaların birleştirilmesi ve sıkıştırılmasını otomatize etmek bize hem zaman hemde sayfalarımızın açılışında hız kazandıracaktır.

  • gulp-rename dosya birleştirme ve sıkışma işlemleri sonucunda dosyamızın ismini farklı bir isimle kaydetmek için gerekli olan plugin.
  • gulp-less isimli plugin less dosyamızı css’e çevirir.
  • gulp-minify-css plugin’i ise oluşan css dosyamızı sıkıştırarak daha küçük bir dosya haline getirir.
  • gulp-concat tüm javascript dosyalarını tek bir javascript dosyası haline getirir.
  • gulp-ng-annotate angularjs içinde kullandığımız dependencies’leri javascript dosyası küçültüldüğünde de kullanışlı halde kalması için işlem yapmakta.
  • gulp-uglify javascript dosyalarımızı birleştirir ve küçültme işlemi yapar.
  • gulp-connect ise tüm işlemler yapıldıktan sonra tarayıcıyı yenilemek için kullanacağımız plugin olacaktır.
  • Aslında Gulp için hazırladığım dosyanın kodlarınıda açıklamalarıyla birlikte buraya ekleyecektim ama sonra github üzerinden yayınlamak daha mantıklı geldi.

Aşağıdaki linkten dosyaları indirip, npm ve bower dosyalarının kurulumunu yapıp kodları inceleyebilirsiniz. Gulp araçlarının tüm açıklamalarını kodların üzerine yazdım.

https://github.com/hootka/famous-angular-template

Bir Cevap Yazın

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