Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131rmak i\u00e7in say\u0131s\u0131z JavaScript k\u00fct\u00fcphanesi ve CSS framework’\u00fcne dayan\u0131r. jQuery, Bootstrap, Angular.js, React.js gibi pop\u00fcler ara\u00e7lar, geli\u015ftiricilerin karma\u015f\u0131k i\u015flevleri h\u0131zl\u0131ca uygulamas\u0131na olanak tan\u0131rken, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131n y\u00f6netimi ba\u015fl\u0131 ba\u015f\u0131na bir zorluk haline gelmi\u015ftir. Hangi s\u00fcr\u00fcm\u00fc kullanmal\u0131, nas\u0131l g\u00fcncellemeli, proje ekibindeki herkesin ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k setine sahip oldu\u011fundan nas\u0131l emin olmal\u0131? \u0130\u015fte bu noktada paket y\u00f6neticileri devreye girer. Bu makalede, \u00f6zellikle Ubuntu 14.04 gibi daha eski bir Linux da\u011f\u0131t\u0131m\u0131nda, \u00f6n y\u00fcz (front-end) JavaScript ve CSS ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in pop\u00fcler bir ara\u00e7 olan Bower’\u0131 ayr\u0131nt\u0131l\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n
Ubuntu 14.04, g\u00fcncel bir i\u015fletim sistemi olmamas\u0131na ra\u011fmen, bir\u00e7ok eski projenin veya belirli sistem gereksinimleri olan ortamlar\u0131n hala bu da\u011f\u0131t\u0131m \u00fczerinde \u00e7al\u0131\u015f\u0131yor olmas\u0131 m\u00fcmk\u00fcnd\u00fcr. Bu nedenle, bu platformda Bower gibi bir arac\u0131n nas\u0131l kurulaca\u011f\u0131n\u0131 ve kullan\u0131laca\u011f\u0131n\u0131 anlamak, bu t\u00fcr sistemlerle \u00e7al\u0131\u015fan geli\u015ftiriciler i\u00e7in de\u011ferli bir bilgi kayna\u011f\u0131d\u0131r. Bower, bir zamanlar \u00f6n y\u00fcz ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi i\u00e7in de facto standartlardan biriydi ve temellerini anlamak, g\u00fcn\u00fcm\u00fczdeki modern alternatiflerin (npm, Yarn) \u00e7al\u0131\u015fma prensiplerini kavramak i\u00e7in de sa\u011flam bir temel olu\u015fturur. Bu rehberde, Bower’\u0131n kurulumundan temel kullan\u0131m\u0131na, geli\u015fmi\u015f \u00f6zelliklerinden en iyi uygulamalar\u0131na kadar her \u015feyi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Web geli\u015ftirme projelerinde ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi, projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fi, geli\u015ftirme h\u0131z\u0131 ve ekip \u00e7al\u0131\u015fmas\u0131n\u0131n verimlili\u011fi a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Manuel olarak ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeye \u00e7al\u0131\u015fmak, k\u0131sa vadede pratik gibi g\u00f6r\u00fcnse de, orta ve uzun vadede ciddi sorunlara yol a\u00e7abilir.<\/p>\n
* S\u00fcr\u00fcm \u00c7ak\u0131\u015fmalar\u0131:<\/strong> Farkl\u0131 k\u00fct\u00fcphanelerin ayn\u0131 projenin farkl\u0131 yerlerinde farkl\u0131 s\u00fcr\u00fcmlerinin kullan\u0131lmas\u0131, beklenmedik hatalara ve davran\u0131\u015flara neden olabilir. Geli\u015ftiricilerin her k\u00fct\u00fcphanenin do\u011fru s\u00fcr\u00fcm\u00fcn\u00fc elle takip etmesi neredeyse imkans\u0131zd\u0131r. * Tutarl\u0131l\u0131k:<\/strong> Paket y\u00f6neticileri, projenin Bu faydalar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, Bower gibi bir paket y\u00f6neticisi kullanmak, \u00f6n y\u00fcz geli\u015ftirme s\u00fcre\u00e7lerinin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir.<\/p>\n Bower, Twitter taraf\u0131ndan geli\u015ftirilen ve \u00f6n y\u00fcz ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in tasarlanm\u0131\u015f bir paket y\u00f6neticisidir. 2012 y\u0131l\u0131nda piyasaya s\u00fcr\u00fcld\u00fc\u011f\u00fcnde, web geli\u015ftirme d\u00fcnyas\u0131nda \u00f6nemli bir bo\u015flu\u011fu doldurmu\u015f ve k\u0131sa s\u00fcrede pop\u00fclerlik kazanm\u0131\u015ft\u0131r. Node.js ve npm \u00fczerinde \u00e7al\u0131\u015f\u0131r, ancak npm’den farkl\u0131 olarak, Bower’\u0131n temel odak noktas\u0131 taray\u0131c\u0131 taraf\u0131nda kullan\u0131lan JavaScript k\u00fct\u00fcphaneleri, CSS framework’leri, fontlar ve resimler gibi \u00f6n y\u00fcz varl\u0131klar\u0131d\u0131r.<\/p>\n Bower, bir projenin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 Bower, ba\u011f\u0131ml\u0131l\u0131klar\u0131 “flat” (d\u00fcz) bir yap\u0131da y\u00f6netmeye \u00e7al\u0131\u015f\u0131r. Yani, her ba\u011f\u0131ml\u0131l\u0131k, Bower, \u00f6zellikle npm’in arka y\u00fcz (back-end) ve geli\u015ftirme ara\u00e7lar\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131na odakland\u0131\u011f\u0131 bir d\u00f6nemde, \u00f6n y\u00fcz varl\u0131klar\u0131 i\u00e7in \u00f6zel bir \u00e7\u00f6z\u00fcm sunmu\u015ftur. npm’in mod\u00fcl yap\u0131s\u0131 genellikle Node.js ortam\u0131nda \u00e7al\u0131\u015fmak \u00fczere tasarlanm\u0131\u015fken, Bower do\u011frudan taray\u0131c\u0131da kullan\u0131lacak statik varl\u0131klar\u0131 hedeflemi\u015ftir. Bower’\u0131n basitli\u011fi ve tek bir komutla t\u00fcm \u00f6n y\u00fcz ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netebilme yetene\u011fi, onu bir\u00e7ok geli\u015ftirici i\u00e7in \u00e7ekici k\u0131lm\u0131\u015ft\u0131r.<\/p>\n Bower, aktif geli\u015ftirme s\u00fcreci 2018 y\u0131l\u0131nda durdurulmu\u015f ve ekibin tavsiyesi, geli\u015ftiricilerin npm veya Yarn gibi ara\u00e7lara ge\u00e7mesidir. Ancak, bu durum Bower’\u0131n tamamen kullan\u0131lamaz oldu\u011fu anlam\u0131na gelmez. \u00d6zellikle Ubuntu 14.04 gibi eski sistemlerde veya mevcut projelerde, Bower hala i\u015flevseldir ve ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimini ba\u015far\u0131yla ger\u00e7ekle\u015ftirebilir. Bu makale, Bower’\u0131n bu t\u00fcr ortamlarda nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6stermeyi ama\u00e7lamaktad\u0131r. Modern projeler i\u00e7in ise npm veya Yarn gibi daha g\u00fcncel ve kapsaml\u0131 paket y\u00f6neticileri tercih edilmelidir.<\/p>\n Bower, Node.js ve npm (Node Package Manager) \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, Ubuntu 14.04 sisteminizde \u00f6ncelikle bu iki bile\u015fenin kurulu olmas\u0131 gerekmektedir.<\/p>\n Ubuntu 14.04’\u00fcn varsay\u0131lan depolar\u0131ndaki Node.js s\u00fcr\u00fcm\u00fc genellikle eski olabilir. Ancak, Bower’\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in bu eski s\u00fcr\u00fcmler bile yeterli olabilir. Daha g\u00fcncel bir s\u00fcr\u00fcm isterseniz, NodeSource deposunu eklemeniz gerekebilir. Bu rehberde, varsay\u0131lan depolar\u0131 ve ard\u0131ndan npm’i kullanarak kurulumu g\u00f6sterece\u011fiz.<\/p>\n 1. Paket Listesini G\u00fcncelleyin:<\/strong><\/p>\n Bu komut, sisteminizdeki mevcut paket listesini ve depolar\u0131n\u0131 g\u00fcnceller.<\/p>\n 2. Node.js ve npm’i Kurun:<\/strong><\/p>\n Ubuntu 14.04’te, Node.js y\u00fcr\u00fct\u00fclebilir dosyas\u0131 genellikle 3. Sembolik Ba\u011flant\u0131 Olu\u015fturun (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir):<\/strong> Bu komut, 4. Kurulumu Do\u011frulay\u0131n:<\/strong> \u00c7\u0131kt\u0131 olarak Node.js ve npm’in kurulu s\u00fcr\u00fcmlerini g\u00f6rmelisiniz (\u00f6rne\u011fin, Node.js ve npm kurulduktan sonra, Bower’\u0131 global olarak kurabiliriz. Global kurulum, Bower komutunu herhangi bir dizinden \u00e7al\u0131\u015ft\u0131rabilmenizi sa\u011flar.<\/p>\n 1. Bower’\u0131 Global Olarak Kurun:<\/strong><\/p>\n 2. Kurulumu Do\u011frulay\u0131n:<\/strong> \u00c7\u0131kt\u0131 olarak Bower’\u0131n kurulu s\u00fcr\u00fcm\u00fcn\u00fc g\u00f6rmelisiniz (\u00f6rne\u011fin, Art\u0131k Ubuntu 14.04 sisteminizde Bower’\u0131 kullanmaya haz\u0131rs\u0131n\u0131z!<\/p>\n Bower’\u0131n temel amac\u0131, \u00f6n y\u00fcz ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 projenize kolayca eklemenizi, g\u00fcncellemenizi ve kald\u0131rman\u0131z\u0131 sa\u011flamakt\u0131r. \u015eimdi ad\u0131m ad\u0131m bir proje olu\u015fturup ba\u011f\u0131ml\u0131l\u0131klar\u0131 nas\u0131l y\u00f6netece\u011fimize bakal\u0131m.<\/p>\n Bir Bower projesi ba\u015flatmak i\u00e7in, \u00f6ncelikle projenizin k\u00f6k dizinini olu\u015fturman\u0131z ve bu dizine ge\u00e7meniz gerekir.<\/p>\n 1. Proje Dizini Olu\u015fturun ve \u0130\u00e7ine Girin:<\/strong><\/p>\n 2. Bower Projesini Ba\u015flat\u0131n:<\/strong> Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Bower size projeniz hakk\u0131nda birka\u00e7 soru soracakt\u0131r (\u00f6rne\u011fin, proje ad\u0131, s\u00fcr\u00fcm\u00fc, a\u00e7\u0131klamas\u0131, ana dosyas\u0131, yazar, lisans). Varsay\u0131lan de\u011ferleri kabul etmek i\u00e7in Enter tu\u015funa basabilir veya kendi bilgilerinizi girebilirsiniz. T\u00fcm sorular\u0131 yan\u0131tlad\u0131ktan sonra, Bower size olu\u015fturulacak 3. Bu dosya, projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ( \u015eimdi projenize pop\u00fcler bir k\u00fct\u00fcphane olan jQuery’yi ekleyelim.<\/p>\n 1. Ba\u011f\u0131ml\u0131l\u0131k Y\u00fckleme:<\/strong><\/p>\n Bu komut iki \u015fey yapar: 2. Ba\u015fka Bir Ba\u011f\u0131ml\u0131l\u0131k Ekleme (\u00d6rne\u011fin Bootstrap):<\/strong><\/p>\n Bootstrap, jQuery’ye ba\u011f\u0131ml\u0131 oldu\u011fu i\u00e7in, Bower her iki paketi de do\u011fru \u015fekilde y\u00f6netecek ve 3. Belirli Bir S\u00fcr\u00fcm Y\u00fckleme:<\/strong> Bu komut, jQuery’nin 1.11.3 s\u00fcr\u00fcm\u00fcn\u00fc y\u00fckleyecek ve 4. Geli\u015ftirme Ba\u011f\u0131ml\u0131l\u0131klar\u0131 ( Y\u00fckl\u00fc ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131z\u0131 en son uyumlu s\u00fcr\u00fcmlerine g\u00fcncellemek i\u00e7in 1. T\u00fcm Ba\u011f\u0131ml\u0131l\u0131klar\u0131 G\u00fcncelleme:<\/strong><\/p>\n Bu komut, 2. Belirli Bir Paketi G\u00fcncelleme:<\/strong> Bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 projenizden kald\u0131rmak i\u00e7in 1. Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 Kald\u0131rma:<\/strong><\/p>\n Projenizde y\u00fckl\u00fc olan t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve bunlar\u0131n s\u00fcr\u00fcmlerini g\u00f6rmek i\u00e7in Bu komut, y\u00fckl\u00fc paketlerin bir a\u011fa\u00e7 yap\u0131s\u0131n\u0131 ve s\u00fcr\u00fcmlerini g\u00f6sterecektir.<\/p>\n Yeni bir k\u00fct\u00fcphane aramak i\u00e7in Bu komut, Bower kay\u0131t defterinde “bootstrap” anahtar kelimesini i\u00e7eren paketleri listeler.<\/p>\n Bower ile ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckledikten sonra, bu k\u00fct\u00fcphaneleri HTML dosyalar\u0131n\u0131zda veya di\u011fer \u00f6n y\u00fcz varl\u0131klar\u0131n\u0131zda kullanman\u0131z gerekir.<\/p>\n 1. 2. HTML Dosyas\u0131na Dahil Etme:<\/strong>
\n* Tekrarlanan Kodu:<\/strong> Bir k\u00fct\u00fcphane projenin farkl\u0131 yerlerinde birden fazla kez indirilebilir veya kopyalanabilir, bu da disk alan\u0131n\u0131 israf eder ve proje boyutunu gereksiz yere art\u0131r\u0131r.
\n* G\u00fcncelleme Kabusu:<\/strong> K\u00fct\u00fcphaneler s\u00fcrekli g\u00fcncellenir. Yeni \u00f6zellikler, performans iyile\u015ftirmeleri veya g\u00fcvenlik yamalar\u0131 i\u00e7erirler. Manuel olarak her k\u00fct\u00fcphanenin yeni s\u00fcr\u00fcm\u00fcn\u00fc takip etmek, indirmek ve eski s\u00fcr\u00fcmle de\u011fi\u015ftirmek zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir.
\n* Ekip \u00c7al\u0131\u015fmas\u0131 Zorluklar\u0131:<\/strong> Bir ekip ortam\u0131nda, her geli\u015ftiricinin ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k setine ve s\u00fcr\u00fcmlerine sahip oldu\u011fundan emin olmak hayati \u00f6nem ta\u015f\u0131r. Manuel y\u00f6netimde, bir geli\u015ftiricinin farkl\u0131 bir s\u00fcr\u00fcm kullanmas\u0131, “bende \u00e7al\u0131\u015f\u0131yor” sendromuna yol a\u00e7abilir ve hata ay\u0131klama s\u00fcrecini uzatabilir.
\n* Y\u00fckleme S\u00fcresi ve Performans:<\/strong> Gereksiz veya yanl\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klar, web sayfas\u0131n\u0131n y\u00fcklenme s\u00fcresini art\u0131rarak kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir.<\/p>\nOtomatik Y\u00f6netimin Faydalar\u0131<\/h4>\n
bower.json<\/code> gibi bir yap\u0131land\u0131rma dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve bunlar\u0131n kesin s\u00fcr\u00fcmlerini tan\u0131mlar. Bu, her geli\u015ftiricinin ve da\u011f\u0131t\u0131m ortam\u0131n\u0131n ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k setine sahip olmas\u0131n\u0131 sa\u011flar.
\n* Verimlilik:<\/strong> Ba\u011f\u0131ml\u0131l\u0131klar\u0131 tek bir komutla kurmak, g\u00fcncellemek veya kald\u0131rmak, geli\u015ftiricilerin zaman\u0131n\u0131 bo\u015fa harcamas\u0131n\u0131 engeller ve daha \u00f6nemli g\u00f6revlere odaklanmalar\u0131n\u0131 sa\u011flar.
\n* Kolay G\u00fcncelleme:<\/strong> Yeni s\u00fcr\u00fcmler \u00e7\u0131kt\u0131\u011f\u0131nda, paket y\u00f6neticisi otomatik olarak uyumlu g\u00fcncellemeleri bulur ve uygular, b\u00f6ylece projeniz her zaman en son iyile\u015ftirmelerden faydalan\u0131r.
\n* \u00c7\u00f6z\u00fcmlenmi\u015f Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong> Paket y\u00f6neticileri, ba\u011f\u0131ml\u0131l\u0131klar\u0131n kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 da (transitive dependencies) otomatik olarak \u00e7\u00f6zerek ve y\u00f6neterek karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131k a\u011flar\u0131n\u0131 basitle\u015ftirir.
\n* S\u00fcr\u00fcm Kontrol Sistemleri ile Entegrasyon:<\/strong> bower.json<\/code> gibi yap\u0131land\u0131rma dosyalar\u0131 s\u00fcr\u00fcm kontrol sistemlerine (Git gibi) dahil edilir. Bu sayede, projenin ba\u011f\u0131ml\u0131l\u0131klar\u0131 da projenin kendisiyle birlikte versiyonlan\u0131r ve takip edilir.<\/p>\nBower Nedir?<\/h3>\n
Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
bower.json<\/code> adl\u0131 bir yap\u0131land\u0131rma dosyas\u0131nda tan\u0131mlar. Bu dosya, projenin ad\u0131, s\u00fcr\u00fcm\u00fc ve ihtiya\u00e7 duydu\u011fu t\u00fcm paketlerin listesi gibi bilgileri i\u00e7erir. Bir paket y\u00fcklendi\u011finde, Bower genellikle paketi GitHub gibi bir Git deposundan indirir ve projenin k\u00f6k dizininde bulunan bower_components<\/code> adl\u0131 \u00f6zel bir klas\u00f6re yerle\u015ftirir. Her paket kendi dizinine indirilir ve bu dizinde genellikle paketin ana dosyalar\u0131 (CSS, JS) bulunur.<\/p>\nbower_components<\/code> klas\u00f6r\u00fcn\u00fcn do\u011frudan alt dizininde yer al\u0131r ve ayn\u0131 paketin birden fazla s\u00fcr\u00fcm\u00fcn\u00fc y\u00fcklemekten ka\u00e7\u0131n\u0131r. E\u011fer iki farkl\u0131 paket ayn\u0131 paketin farkl\u0131 s\u00fcr\u00fcmlerine ihtiya\u00e7 duyuyorsa, Bower s\u00fcr\u00fcm \u00e7ak\u0131\u015fmalar\u0131n\u0131 bildirecek ve genellikle en \u00fcst d\u00fczey ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n belirtti\u011fi s\u00fcr\u00fcm\u00fc kullanmaya \u00e7al\u0131\u015facakt\u0131r.<\/p>\nNeden Bower?<\/h4>\n
Bower’\u0131n G\u00fcncel Durumu<\/h4>\n
Ubuntu 14.04 Ortam\u0131n\u0131n Haz\u0131rlanmas\u0131<\/h3>\n
Node.js ve npm Kurulumu<\/h4>\n
sudo apt-get update<\/code><\/pre>\nsudo apt-get install nodejs npm<\/code><\/pre>\nnodejs<\/code> olarak adland\u0131r\u0131l\u0131rken, node<\/code> komutu ba\u015fka bir pakete (\u00f6rne\u011fin, node<\/code> adl\u0131 bir amat\u00f6r telsiz program\u0131na) i\u015faret edebilir. Bu durum, Node.js komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131rken sorunlara yol a\u00e7abilir.<\/p>\n
\n Node.js komutunu node<\/code> olarak kullanabilmek i\u00e7in bir sembolik ba\u011flant\u0131 olu\u015fturmak iyi bir uygulamad\u0131r:<\/p>\nsudo ln -s \/usr\/bin\/nodejs \/usr\/bin\/node<\/code><\/pre>\n\/usr\/bin\/node<\/code> ad\u0131nda bir sembolik ba\u011flant\u0131 olu\u015fturarak, node<\/code> komutunu \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda asl\u0131nda \/usr\/bin\/nodejs<\/code> y\u00fcr\u00fct\u00fclebilir dosyas\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
\n Node.js ve npm’in do\u011fru \u015fekilde kuruldu\u011fundan emin olmak i\u00e7in s\u00fcr\u00fcmlerini kontrol edin:<\/p>\nnode -v\n npm -v<\/code><\/pre>\nv0.10.25<\/code> ve 1.3.10<\/code>).<\/p>\nBower Kurulumu<\/h4>\n
sudo npm install -g bower<\/code><\/pre>\nsudo<\/code> kullanmak, npm’in global paketleri y\u00fcklemek i\u00e7in gerekli izinlere sahip olmas\u0131n\u0131 sa\u011flar. -g<\/code> bayra\u011f\u0131, paketin global olarak kuruldu\u011funu belirtir.<\/p>\n
\n Bower’\u0131n ba\u015far\u0131l\u0131 bir \u015fekilde kuruldu\u011fundan emin olmak i\u00e7in s\u00fcr\u00fcm\u00fcn\u00fc kontrol edin:<\/p>\nbower -v<\/code><\/pre>\n1.3.12<\/code>).<\/p>\nBower ile Proje Olu\u015fturma ve Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00f6netme<\/h3>\n
Yeni Bir Proje Ba\u015flatma<\/h4>\n
mkdir my-frontend-project\n cd my-frontend-project<\/code><\/pre>\n
\n Projenizi bir Bower projesi olarak tan\u0131mlamak i\u00e7in bower init<\/code> komutunu kullan\u0131n. Bu komut, projeniz i\u00e7in bir bower.json<\/code> dosyas\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\nbower init<\/code><\/pre>\n
\n \u00d6rnek \u00e7\u0131kt\u0131lar ve girilebilecek de\u011ferler:<\/p>\n? name: my-frontend-project\n ? version: 0.0.1\n ? description: A sample project using Bower\n ? main file: index.html\n ? keywords: front-end, bower, javascript, css\n ? authors: Your Name bower.json<\/code> dosyas\u0131n\u0131n bir \u00f6nizlemesini g\u00f6sterecek ve onay isteyecektir. Onaylad\u0131\u011f\u0131n\u0131zda, bower.json<\/code> dosyas\u0131 proje dizininizde olu\u015fturulacakt\u0131r.<\/p>\nbower.json<\/code> Dosyas\u0131:<\/strong>
\n Olu\u015fturulan bower.json<\/code> dosyas\u0131, projenizin manifestosu gibidir. \u0130\u00e7eri\u011fi yakla\u015f\u0131k olarak \u015f\u00f6yle olacakt\u0131r:<\/p>\n{\n \"name\": \"my-frontend-project\",\n \"version\": \"0.0.1\",\n \"description\": \"A sample project using Bower\",\n \"main\": \"index.html\",\n \"keywords\": [\n \"front-end\",\n \"bower\",\n \"javascript\",\n \"css\"\n ],\n \"authors\": [\n \"Your Name dependencies<\/code> ve devDependencies<\/code> alanlar\u0131 alt\u0131nda) ve di\u011fer meta verilerini saklayacakt\u0131r.<\/p>\nBa\u011f\u0131ml\u0131l\u0131k Ekleme<\/h4>\n
bower install jquery --save<\/code><\/pre>\n
\n * jQuery paketini indirir ve projenizin k\u00f6k dizininde bower_components<\/code> adl\u0131 bir klas\u00f6r olu\u015fturarak i\u00e7ine yerle\u015ftirir.
\n * --save<\/code> bayra\u011f\u0131 sayesinde, jQuery’yi bower.json<\/code> dosyan\u0131zdaki dependencies<\/code> listesine ekler. Bu, projenizi ba\u015fka bir geli\u015ftiriciye verdi\u011finizde veya da\u011f\u0131t\u0131m ortam\u0131nda kurarken, bower install<\/code> komutuyla t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n otomatik olarak y\u00fcklenmesini sa\u011flar.<\/p>\nbower.json<\/code> dosyan\u0131z \u015fimdi \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n{\n \"name\": \"my-frontend-project\",\n \"version\": \"0.0.1\",\n \"description\": \"A sample project using Bower\",\n \"main\": \"index.html\",\n \"keywords\": [\n \"front-end\",\n \"bower\",\n \"javascript\",\n \"css\"\n ],\n \"authors\": [\n \"Your Name ~3.7.1<\/code> ifadesi, Bower’\u0131n anlamsal versiyonlama kurallar\u0131na g\u00f6re 3.7.x serisindeki en son uyumlu s\u00fcr\u00fcm\u00fc kullanaca\u011f\u0131 anlam\u0131na gelir.<\/p>\nbower install bootstrap --save<\/code><\/pre>\nbower_components<\/code> klas\u00f6r\u00fcne yerle\u015ftirecektir.<\/p>\n
\n Bazen bir paketin belirli bir s\u00fcr\u00fcm\u00fcn\u00fc y\u00fcklemeniz gerekebilir. \u00d6rne\u011fin, jQuery’nin 1.x serisinden eski bir s\u00fcr\u00fcm\u00fcn\u00fc y\u00fcklemek i\u00e7in:<\/p>\nbower install jquery#1.11.3 --save<\/code><\/pre>\nbower.json<\/code> dosyan\u0131zdaki dependencies<\/code> listesine jquery: \"1.11.3\"<\/code> olarak kaydedecektir.<\/p>\n--save-dev<\/code>):<\/strong>
\n Sadece geli\u015ftirme ortam\u0131nda kullan\u0131lan ba\u011f\u0131ml\u0131l\u0131klar (\u00f6rne\u011fin, test k\u00fct\u00fcphaneleri veya build ara\u00e7lar\u0131) i\u00e7in --save-dev<\/code> bayra\u011f\u0131n\u0131 kullanabilirsiniz. Bu ba\u011f\u0131ml\u0131l\u0131klar devDependencies<\/code> alan\u0131na kaydedilir ve genellikle \u00fcretim ortam\u0131na da\u011f\u0131t\u0131lmaz.<\/p>\nbower install jasmine --save-dev<\/code><\/pre>\nBa\u011f\u0131ml\u0131l\u0131klar\u0131 G\u00fcncelleme<\/h4>\n
bower update<\/code> komutunu kullanabilirsiniz.<\/p>\nbower update<\/code><\/pre>\nbower.json<\/code> dosyan\u0131zda belirtilen s\u00fcr\u00fcm aral\u0131klar\u0131na uygun olarak t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 en son s\u00fcr\u00fcmlerine g\u00fcncelleyecektir.<\/p>\n
\n Sadece belirli bir paketi g\u00fcncellemek i\u00e7in:<\/p>\nbower update jquery<\/code><\/pre>\nBa\u011f\u0131ml\u0131l\u0131klar\u0131 Kald\u0131rma<\/h4>\n
bower uninstall<\/code> komutunu kullan\u0131n.<\/p>\nbower uninstall jquery --save<\/code><\/pre>\n--save<\/code> bayra\u011f\u0131, paketi bower_components<\/code> klas\u00f6r\u00fcnden kald\u0131rman\u0131n yan\u0131 s\u0131ra bower.json<\/code> dosyas\u0131ndaki dependencies<\/code> veya devDependencies<\/code> listesinden de kald\u0131r\u0131r.<\/p>\nY\u00fckl\u00fc Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Listeleme<\/h4>\n
bower list<\/code> komutunu kullan\u0131n.<\/p>\nbower list<\/code><\/pre>\nBa\u011f\u0131ml\u0131l\u0131klar\u0131 Arama<\/h4>\n
bower search<\/code> komutunu kullanabilirsiniz.<\/p>\nbower search bootstrap<\/code><\/pre>\nY\u00f6netilen Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Projenizde Kullanma<\/h3>\n
bower_components<\/code> Klas\u00f6r\u00fc:<\/strong>
\n Bower, t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 projenizin k\u00f6k dizininde otomatik olarak olu\u015fturdu\u011fu bower_components<\/code> klas\u00f6r\u00fcne indirir. Bu klas\u00f6r, web sunucunuz taraf\u0131ndan eri\u015filebilir olmal\u0131d\u0131r.<\/p>\n
\n Varsayal\u0131m ki index.html<\/code> ad\u0131nda bir dosyan\u0131z var ve jQuery ile Bootstrap’i kullanmak istiyorsunuz. Bu dosyalar\u0131