Bower là phương tiện quản lí các nguồn tài nguyên cho lập trình viên fornt-end. Tài nguyên như thể: HTML, CSS, JS, font chữ và hình ảnh. Dụng cụ được phát triển bởi Twitter.

Theo như cách truyền thống, khi cần sử dụng một số thư viện nào đó, lập trình viên lên mạng tìm kiếm những thư viện đó rồi tải về, sau nó lại copy những thư viện cần dùng vào project mình đang làm. Khi nào cần update thư viện đang dùng trong project lên phiên bản mới hơn thì lại phải lên mạng tìm kiếm -> tải về ->xóa thư viện cũ -> copy thư viện mới vào project. Hơn nữa, khi thao tác làm việc nhóm và sử dụng git để quản lí, khi chúng ta up source code của bạn lên git và kèm theo trong đó là những thư viện bạn đang sử dụng. Số lượng file đưa lên git có thể lên tới hàng trăm đến hàng nghìn file. Và Leader team bạn ngồi check từng file để merge pull request của bạn. Điều đó là “thảm họa”. Đó là lúc bạn cần phải sử dụng Bower. Khi sử dụng Bower chúng ta có thể tải về những thư viện mà bạn cần phải sử dụng trong project và có thể update lên phiên bản tiên tiến nhất mà không cần xóa thư viện phiên bản cũ đi và tải lại.

Để sở hữu thể thiết lập cấu hình và sử dụng Bower, trước tiên bạn cần phải phải thiết lập cấu hình node, npm, git.

Ở đây, mình sẽ hướng dẫn cách cài trên Ubuntu, còn trên Windows và Mac, mọi người dân có thể tìm trên google.

Cách thiết lập cấu hình node, npm:

• Add sentayho.com.vn PPA
  • $ sudo apt-get install curl
  • curl -sL sentayho.com.vn/setup_12.x | sudo -E bash –
• Install sentayho.com.vn
  • $ sudo apt-get install nodejs
• Check sentayho.com.vn, NPM version
  • `node -v
  • npm -v

Git ở trên Ubuntu đã có sẵn, vì vậy mọi người sẽ không còn cần thiết lập cấu hình.

Tùy chỉnh cấu hình Bower:

Chạy câu lệnh sau: $ npm install -g bower. -g Có tức thị chúng ta có thể sử dụng Bower bất kỳ project nào trên máy tính của bạn.

Vào thực mục chứa project của bạn, mở command line lên và chạy câu lệnh sau: $ bower init. Bạn chỉ có ấn enter và yes cho nhanh =))))). Mục tiêu là để tạo file sentayho.com.vn trong thư mục chứa project của bạn. File này sẽ chưa thông tin những thư viện bạn đã cài. Những thông tin này nằm ở tính chất dependencies. Vị dụ file sentayho.com.vn của mình:

Tiếp theo bạn cần phải tạo một thư mục .bowerrc cùng cấp với thư mực sentayho.com.vn. Thư mục này còn có tác dụng config đường dẫn nơi mà các bạn tải các thư viên về. File .bowerrc sẽ có được dạng như sau:

Cuối cùng, thêm vào file .gitignore dòng sau:

Cách tải các thư viện: Để tải các thư viện, bạn sử dụng câu lệnh sau:

Cách gỡ các thư viện: Để gỡ những thư viện bạn sử dụng câu lệnh sau:

Cách update các thư viện: Để update những thư viện bạn sử dụng câu lệnh sau:

Ví dụ: Mình muốn tải thư viên Jquery cho project của mình.

1. Tải thư viện Jquery bằng câu lệnh sau: $ bower install jquery -save
2. Khi đó trong thư mục mà đã config trong thư mực .bowerrc sẽ có được thư mục jquey. Cụ thể các thư viện mình tải về sẽ tiến hành lưu trong:public/bower_components/

Trong trường hợp, bạn không thể tìm thấy package mà mình cần trên sentayho.com.vn/search/. Chúng ta cũng có thể tự tạo một package riêng cho mình bằng phương pháp sau:

1. Trước tiên bạn vào github cả nhân của bạn, tạo một repository mới:

Nhấn vào nút new, sau đó đặt tên repository của mình và nhấp vào nút Create repository

Sau đó tạo một file sentayho.com.vn, viết cái gì vào cũng được. Repository sẽ có được dạng như sau:

1. Tiếp theo bạn clone repository này về local bằng câu lệnh git clone. Bạn truy cập vào thư mục git sau khi chúng ta clone về. Tại thư mục đó bạn copy package bạn đã tải về vào thư mục này và đưa lên git.
2. Tiếp theo copy link github repository:

1. Và chạy câu lệnh sau trên command line: bower register bower-package sentayho.com.vn/ducls-0951/bower-package.git, bower-package là tên gọi package mình đặt, chúng ta có thể đặt tên gì rồi cũng được, phía sau là link github repostory của bạn. Sau đó chọn yes để đăng ký. Tên package có thể trùng hoặc không, nếu trùng bạn đặt tên khác. Đây là ví dụ bị trùng:

Còn đây là ví dụ khi thành công:

1. Sau đó bạn chạy câu lệnh sau: bower install -save bower-demoo. bower-demoo là tên gọi package bạn đã đăng ký. Package bạn lưu trên github sẽ tiến hành tải về và lưu trong thư mục bạn đã config.

Bài hướng dẫn của mình đến đây là hết. Hứa các bạn lần sau vào trong 1 ngày bị deadline dí.

Happy Coding!!!