Tại sao bạn nên sử dụng Bower ?

- Không cần phải mất thời gian download lại các package như jQuery, bootstrap, font-awesome…. mỗi khi bắt đầu dự án.

- Có thể giúp download nhanh 1 package nào đó với version theo ý bạn 1 cách nhanh nhất

- Có thể download nhanh nhiều package cùng lúc

Bower hỗ trợ download  tất cả các thư viện phổ biến cho phát triển web hiện nay như:

jQuery

Bootstrap

Angular

Font Awesome

Animate.css

Và rất rất nhiều ứng dụng khác…

Cài đặt

Bower yêu cầu bạn phải cài đặt nodejs, npm và git trước khi sử dụng.Sau đó, bạn sử dụng command line để cài đặt Bower với lệnh:

npm install -g bower

Cài đặt một package bất kì với cú pháp:

bower install <package>

Ví dụ để cài đặt thư viện jquery ta dùng lệnh:

​bower install jquery

Ví dụ để cài đặt thư viện boostrap ta dùng lệnh:

bower install boostrap

Các thư  viện mà bower hỗ trợ rất nhiều, bạn có thể xem thêm tại đây.

Ngoài ra, bạn có thể cài đặt một thư viện từ một URL bất kì:

bower install git://github.com/user/package.git

Hoặc các bạn cũng có thể cài đặt với version theo yêu cầu với cú pháp: 

bower install jquery#1.8.3

Tìm kiếm 1 package nào đó: 

 bower search <package name>

Liệt kê tất cả package: bower list . Hoặc bạn có thể vào đây để xem các package trên website

- Xóa package:

bower uninstall <package>

Quản lý các packages với bower.json
Phía trên mình đã hướng dẫn các bạn cách cài đặt từng package riêng lẻ, trong thực tế một dự án chúng ta thường dùng nhiều packages, nếu cứ cài đặt từng package một như thế cũng không phải là giải pháp hay. Bower cho phép chúng ta khai báo các gói cần sử dụng trong bower.json.
Để tạo ra file bower.json chúng ta sử dụng dòng lệnh:

bower init

Kết quả sẽ tạo ra file bower.json với nội dung:

{
  name: 'exam2',
  authors: [
    'Tran Thi Thu Thuy'
  ],
  description: '',
  main: '',
  moduleType: [],
  license: 'MIT',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    jquery: '~2.1.4'
  }
}

Bạn có thể thấy trong thư mục dependencies có chưa package jquery mình đã cài ở trên

{
  "name": "exam2",
  "authors": [
    "Tran Thi Thu Thuy"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.6"
  }
}

Có 2 cách để thêm package mới, một là chạy dòng lệnh cài đặt package thêm tham số -save để update lại vào bower.json khi cài đặt

Theo trên bạn sẽ nhìn thấy có thêm 

"bootstrap": "~3.3.6"

Cách 2: Ta định nghĩa tên package và số hiệu version theo cú pháp
package : version
Sau đó chạy lệnh bower install

Sử dụng Brower thật đơn giản và tiện lợi phải không các bạn. Để tìm thêm thì bạn ghé thăm trang chủ Bower https://bower.io/