Quản lý Front-end Resource với Bower

Bower là ứng dụng quản lý các gói (package) cho web được viết bởi Twitter. Trong bài viết này mình sẽ giới thiệu về Bower cũng như cách sử dụng nó, để chúng ta có thể quản lý – download các package cần thiết cho công việc thiết kế web. Giúp tiết kiệm thời gian hơn

quan-ly-front-end-resource-bower

Vì sao bạn cần sử dụng Bower ?

  • Bạn không muốn mất thời gian mỗi khi làm dự án nào đó lại phải đi tìm các package (jquery, angular…) để download
  • Bạn muốn download nhanh 1 package nào đó với version theo ý bạn 1 cách nhanh nhất
  • Bạn muốn download nhanh nhiều package cùng lúc

Ví dụ khi bạn thiết kế web, bạn cần download jQuery phiên bản mới nhất về để sử dụng, bạn phải vào website của jQuery hoặc các CND của Google…để lấy link và download nó về. Hơi mất thời gian. Nhưng với Bower, sau khi cài đặt nó, bạn chỉ click Shift + Chuột phải chạy command-line tại thư mục bạn cần, gõ: bower install jquery . Vậy là xong, bạn đã có gói jQuery mới nhất để sử dụng, nhanh và tiện lợi quá phải không?

Bower hỗ trợ download tất cả các ứng dụng 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…

 Hướng dẫn cài đặt và sử dụng

Bower yêu cầu bạn phải cài đặt Node – NPM – Git trước khi sử dụng. Các bạn có thể vào trang chủ Bower để tham khảo thêm .

Nếu bạn muốn phát triển và nâng cao kiến thức phát triển web thì mình nghĩ các bạn nên cài các gói đó, vì xu hướng ngày nay đang rất thịnh các ứng dụng đó để phát triển website, setup vào máy sẽ không thừa đâu :D

Sau khi đáp ứng các gói yêu cầu cài đặt xong, các bạn gõ: npm install -g bower để cài bower vào máy tính

Cú pháp để sử dụng Bower là: bower install <tên package>

Ví dụ:

  • bower install jquery
  • bower install bootstrap
  • bower install angular

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>

Bower sử dụng 2 file này để quản lý các package chúng ta:

  • .bowerrc để chỉ định thư mục sẽ được lưu vào đường dẫn nào
  • bower.json để chỉ định cài đặt các package nào chúng ta cần

Khai báo thư mục chứa package sau khi download bằng Bower

Mặc định, khi download  một package nào đó thì package đó sẽ được lưu trong thư mục: bower_components . Để thay đổi thư mục chứa package theo ý mình, các bạn tạo mới file .bowerrc với nội dung:

{
“directory”: “libs”
}

Với tên thư mục là libs, tất cả các package sẽ được lưu vào trong đó

Khai báo nhiều gói package cùng lúc để download 1 lúc nhiều package:

Các bạn tạo file bower.json với nội dung:

{
“name”: “sample-app”,
“version”: “1.0.0”,
“dependencies”: {
“bootstrap”: “latest”,
“font-awesome”: “latest”,
“animate.css”: “latest”,
“angular”: “latest”
}
}

Sau đó chạy lệnh : bower install

Hy vọng bài viết này sẽ giúp ích cho các bạn :)