Cara menginstall Bower di Linux Ubuntu

Asalamualikum wr wb ,haloo sobat intel kali ini mimin akan bhas tentang tools di operasi sistem berbasisi LINUX. Dalam pembuatan sebuah website project, kita sering membutuhkan beberapa library atau framework lain khususnya di bagian frontend. Selain itu, belakangan ini banyak sekali library dan framework yang tersedia yang bisa memudahkan kita dalam proses development tersebut. Nah saat kita sudah menggunakan banyak library sekaligus, maka akan muncul masalah saat kita harus memanage atau mengupdate library yang kita gunakan. Kita bisa saja mendownload ulang library tersebut dan menggantinya dengan yang lebih baru tapi bagaimana jika kita punya puluhan library bahkan ratusan sekaligus yang perlu di maintain? 

Bower adalah paket manager untuk library web yang akan sangat berguna bagi front-end developer dalam mengelola librari yang berkaitan dengan web, Bower hampir mirip dengan Composer, namun Composer adalah paket manager untuk PHP. Bower dijalankan dengan Node.js dan menggunakan Git untuk paket yang disertakan.

Jadi dengan adanya Bower, bila dulu kita harus manual mengatur library atau package yang dibutuhkan dalam sebuah project maka sekarang pekerjaan tersebut menjadi lebih mudah, kita juga bisa mengatur version mana yang kita butuhkan tanpa harus manual mendownload ulang satu persatu library tersebut. Dengan sebuah command saja maka library/package kamu sudah otomatis terinstall dan terupdate.

Bower dibuat oleh tim Twitter, @fat and @maccman, salah satu diantara mereka yaitu @fat adalah yang membuat framework Bootstrap bersama rekannya @mdo. Untuk menginstall Bower maka kita harus terlebih dahulu menginstall Node.js dan npm. Berikut ini adalah langkah-langkah menginstall Bower di Ubuntu Linux.

Install Bower

Untuk menginstall Bower, kamu harus menginstall npm, Node package manager. Kalau kamu belum menginstall npm, coba kunjungi Node.js website and download  Node.js sesuaikan dengan sistem yang kamu gunakan. Kalau sudah install Node.js pastikan npm berjalan dengan mengeceknya lewat terminal.

$ npm version //check the version of npm

Jika npm sudah terinstall dengan benar, sekarang kita akan lanjut menginstall Bower. Ketik code di bawah ini untuk menginstall Bower.

$ npm install -g bower

Perintah di atas akan menginstall Bower secara global di sistem kamu, yang artinya kamu dapat memanggil command bower di directory mana saja. Selanjutnya kita akan belajar beberapa basic command yang tersedia dan menginstall beberapa package dengan Bower.

Searching Package

Untuk mencari package yang tersedia lewat bower, kamu bisa menggunakan perintah search seperti di bawah ini:

$ bower search 

Misalnya jika kita ingin mencari sebuah package yang memiliki nama bootstrap, kamu bisa menggunakan perintah seperti berikut:

$ bower search bootstrap

Kamu perlu menunggu sebentar, dan jika sudah selesai maka kamu akan melihat banyak list package yang memiliki nama bootstrap di terminal kamu.

Install Package

Jika kalian sudah menemukan nama package yang mau diinstall, kita lanjut untuk bagaimana cara menginstall package-package tersebut.

Package directory

Package directory ini maksudnya dimana nanti kamu akan menaruh file-file dari package yang kamu mau install/

Secara default, semua package yang kamu install akan berada di dalam folder bower_components. Namun jika kamu ingin package-package tersebut di install di folder lain maka caranya adalah dengan membuat sebuah file baru dan di beri nama .bowerrc kemudian silakan isi file tersebut dengan code di bawah ini:

{
  "directory": "path/ke/folder/yang/diinginkan"
}

Pastikan kamu simpan di base folder project kamu ya. 

Install lewat command line

Nah sebelumnya kan kita sudah bisa mencari package lewat bower, selanjutnya kita akan menginstall package yang kita mau, kita bisa menggunakan perintah install seperti berikut:

$ bower install 

Secara umum kita bisa menginstall package menggunakan nama packagenya langsung, tapi selain itu, kita juga menginstall package dengan beberapa cara lain seperti:

• Git endpoint, misalnya git://github.com/twbs/bootstrap.git
• path ke local Git repository.
• Shorthand endpoint seperti twbs/bootstrap. 
• Url ke zip atau tar file. Nanti bower akan mengekstraknya secara otomatis

Sebagai informasi, perintah install tersebut akan secara otomatis menginstall dan mendownload versi terakhir dari package tersebut. Namun jika kamu ingin untuk menginstall versi tertentu kamu bisa menuliskan versi dari package tersebut setelah nama package dipisahkan dengan # seperti di bawah ini:

$ bower install #

Secara default, jika kamu menginstall beberapa package, Bower akan membuat sebuah diretory baru dengan nama bower_components dimana semua package yang kamu install akan berada di dalam sana. Misalnya kamu menginstall bower di sebuah diretory dengan nama example maka susunan directorynya kira-kira akan menjadi seperti berikut:

 example 

 |_ bower_components
 |_ package_name
 |_ package_name
 |_ package_name
 .....

 

Innstall lewat file bower.json

Selain lewat terminal, kamu juga bisa menginstall package/library sekaligus dengan membuat file bernama bower.json. Kamu bisa membuat manual seperti contoh di bawah ini:

{




"name": "app-name",



"version": "0.0.1",



"private": true,







"dependencies": {



"jquery": "~1.10.2"



}




}

Atau kamu bisa lewat command line dengan perintah bower init di directory yang kamu mau. Bower akan menampilakan beberapa perintah yang mudah untuk diikuti, tapi kamu harus tetap mebambahkan list dependecies-nya secara manual.

Penjelasan mengenai masing-masing content dari file bower.json tersebut adalah:

• name : Nama dari project kamu
• version : Versi dari project yang kamu buat
• private : Dengan mensetting valuenya menjadi true, berarti package tersebut adalah private dan kamu tidak bermaksud untuk menambahkannya ke registry
• dependencies : list package yang akan kamu gunakan di dal am project kamu

Kalau kamu sudah punya file bower.json dan lengkap dengan dependencies-nya maka untuk menginstallnya kamu tinggal jalankan perintah bower install  dan bower akan mendownloadnya buat kamu.

Jika semua dependency yang kamu inginkan sudah terdownload, kamu bisa menambahnya ke dalam HTML markup lewat tag atau .

 rel="stylesheet" type="text/css" href="path/to/bower_components/bootstrap/dist/css/bootstrap.min.css">

Update Package

Seperti di awal tadi, tugas bower adalah memudahkan kita untuk memanage library/package yang kita gunakan. Salah satunya adalah memudahkan kita untuk meng-update library yang kita inginkan. Untuk mengupdate package kamu bisa menggunakan perintah bower update. Ini akan mendownlod ulang package yang kamu punya sebelumnya dengan versi yang kamu deklarasikan untuk masing-masing package di file bower.json.

Jika kamu ingin mengupdate salah satu package saja, kamu bisa menjalankan perintah bower update di ikuti dengan nama packagenya. Contohnya seperti di bawah ini:

$ bower update query

Melihat List Package

Untuk mengetahui package apa saja yang terinstall di project kamu, kamu bisa menggunakan perintah bower list lewat command line. 

Pada gambar di atas adalah contoh untuk simple project yang menggunakan Bootstrap, JQuery, JQuery-Pjax dan RequireJs. Sebagai tambahan, saat kamu menjalankan bower list, kamu juga dapan mengetahui varsi terbaru dari package tersebut jika tersedia lewat bagian latest.

Uninstall Package

Untuk menguninstall package kamu bisa menjalankan perintah bower uninstall di ikutin dengan nama packagenya seperti contoh di bawah ini.

$ bower uninstall jquery

Kamu bisa meng-uninstall beberapa package sekaligus dengan menuliskan nama packagenya secara berurutan. Contohnya seperti di bawah ini:

$ bower uninstall jquery bootstrap requirejs

Sebagai tambahan lagi, jika kamu ingin dependency di bower.json juga ikut terupdate maka bisa menambahkan perintah --save

$ bower uninstall jquery --save

Contoh di atas saat dijalankan maka akan meremove jquery dari folder bower_components dan juga menghapus jquery dari list depedency di file bower.json

Nah itu , dia sobat intel penjelasan dari mimin semoga dapat membantu yeah!terima kasih.

elshaswoyo#72