Bower và lập trình front-end
Bower
5
frontend
16
White

Phan Hoàng Công viết ngày 26/06/2015

Bower by Twitter

Bower là gì

Bower là một công cụ quản lý resource cho lập trình front-end được open source bởi Twitter. Đã qua cái thời bạn phải download từng thư viện CSS hay JS về bỏ vào project của bạn, rồi nâng cấp version bằng tay khi down đi down lại version mới. Bower giúp tìm kiếm, cài đặt, nâng cấp và cố định dependency cho một front-end project.

Cài đặt

Đầu tiên để cài đặt Bower, bạn phải có npm, là công cụ quản lý package của node. Kể ra để dùng mỗi Bower mà phải cài npm thì cũng hơi mất công, nhưng đây là cách đơn giản nhất
Ở Mac bạn có thể download từ trang chủ của Node hoặc dùng homebrew.

brew install node

Window thì chỉ có cách download và cài đặt từ trang chủ nói trên
Sau khi install được node thì sẽ tự động có npm. Bower được cài đặt bằng câu lệnh

npm install -g bower

Ở đây -g có nghĩa là global - bạn có thể dùng Bower cho bất kỳ project nào trong máy.

Sử dụng câu lệnh

Sau khi đã cài đặt như trên thì bạn sẽ có câu lệnh bower để sử dụng. Cách sử dụng thì vô cùng đơn giản

bower install bootstrap 

Như thế này là đã có toàn bộ resource của Twitter Bootstrap vào trong 1 thư mục bower_components

Để cài đặt Bootstrap với version cụ thể, VD 3.2.0 thì câu lệnh sẽ là

bower install bootstrap#3.2.0

Bower còn có thể cài đặt thẳng từ github như

bower install twbs/bootstrap
bower install git@github.com:twbs/bootstrap.git
bower install https://github.com/twbs/bootstrap.git

Sau khi cài đặt Bootstrap được một thời gian, khi Bootstrap nâng cấp phiên bản mới và bạn muốn update theo thì chỉ cần

bower update

Sử dụng bower.json

Giống như các dependency manager khác, bạn có thể định nghĩa một tập các dependency vào một file bower.json và để câu lệnh bower đọc file đó (thay cho việc phải gõ bower install x n lần với n thư viện).

bower.json có thể được khỏi tạo bởi câu lệnh

bower init

Bạn sẽ được hỏi một số thông tin cơ bản và sau khi chọn, Bower sẽ generate một file bower.json cơ bản, ví dụ như sau

{
  "name": "awesome_proj",
  "version": "0.0.0",
  "authors": [
    "CongPH"
  ],
  "license": "MIT"
}

Để định nghĩa các package muốn install, mình thêm vào file trên như sau

{
  "name": "awesome_proj",
  "version": "0.0.0",
  "authors": [
    "CongPH"
  ],
  "license": "MIT",
  "dependencies": {
    "bootstrap": "~3.2.0"
  }
}

Khi này muốn bower đọc file trên thì chỉ cần dùng câu lệnh:

bower install

Giả sử khi bạn đã viết đầy đủ n dependency vào bower.json và muốn thêm một dependency mới, bạn có thể vừa install vừa tự động thêm vào bower.json như sau

bower install jquery --save

Một số cách dùng hữu ích khác

Ở dưới đây là những câu lệnh mình hay dùng

bower search normalize

=> Cái này không khác với chuyện lên http://bower.io/search/ và search trực tiếp

bower list

=> Liệt kê nhanh dependencies

bower info bootstrap

=> Xem nhanh thông tin cụ thể về bootstrap

bower lookup bootstrap

=> Xem lại đường dẫn cài đặt của bootstrap

bower uninstall bootstrap --save

=> Gỡ bỏ bootstrap đồng thời xóa đi thông tin tương ứng trong bower.json

Bower cache

Về cơ bản bower dùng cơ chế cache, có nghĩa là bower chỉ download package một lần và save vào ~/.bower/cache. Lần sau nếu bạn gõ cùng một câu lệnh thì bower sẽ tự động lấy cache để install chứ không connect đến source nữa.

Tuy nhiên đôi lúc bạn sẽ không muốn dùng cache, muốn download lại từ source để lấy bản "fresh" nhất. Khi đó bạn sẽ cần phải clear bower cache

bower cache clear
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Phan Hoàng Công

6 bài viết.
22 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
35 9
Lang thang thấy một số button rất đẹp trên Codepen nên tổng hợp lại. Các bạn click thẳng vào link tiêu đề để đến codepen nhé. (Link) (Ảnh) (Li...
Phan Hoàng Công viết gần 3 năm trước
35 9
White
21 6
Hiệu ứng chữ Để tạo ra một website ấn tượng thì design, hay "bộ mặt" của trang web là cực kỳ quan trọng. Trong design nói chung thì tiêu đề, đầu đ...
Phan Hoàng Công viết hơn 3 năm trước
21 6
White
8 1
(Ảnh) Web Storage HTML 5 đã giới thiệu về web storage, giúp client code (Javascript) lưu thông tin với dung lượng lớn hơn hơn an toàn hơn so với...
Phan Hoàng Công viết hơn 3 năm trước
8 1
Bài viết liên quan
White
8 0
Clipboard.js là một thư viện vô cùng gọn nhẹ (2kb) giúp bạn dễ dàng cắt hoặc sao chép nội dung trên trang web một cách dễ dàng. Được sử dụng trong ...
Duyệt viết gần 3 năm trước
8 0
White
28 6
Chuyển từ PHP sang Nodejs thật có nhiều cái bỡ ngỡ. Cấu trúc được viết dưới dạng NoneBlocking tăng tốc độ xử lý và chịu tải lên cực cao. Ứng dụng c...
Duyệt viết hơn 3 năm trước
28 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
22 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!