Chủ Nhật, 10 tháng 1, 2016

[Web Development] Bower – công cụ quản lí package mà bất kì Web Developer phải biết

Chia sẻ để lưu trên trang của bạn Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page

Mở bài bằng một câu trích dẫn của Philipp Lenssen mà mình rất thích:

Chỉ những lập trình viên lười biếng mới muốn viết các loại công cụ có thể thay thế họ trong công việc. Chỉ có một lập trình viên lười biếng mới tránh việc viết những dòng code lặp đi lặp lại một cách đơn điệu. Các công cụ và quy trình lấy cảm hứng từ sự lười biếng thường làm tăng hiệu suất công việc.

Vậy nếu bạn đã lười biếng với việc download các thư viện rồi copy vào cho từng project web application thì mình xin giới thiệu bạn công cụ giúp tự động hóa vấn đề trên, đó chính là Bower.

su-dung-bower

Vậy Bower là gì ?

Bower là công cụ quản lý các gói (package) cho web được Twitter phát triển dùng để quản lý và cài đặt các package cần thiết cho web project một cách nhanh chóng.

Vậy tại sao phải dùng Bower?

Chắc hẳn khi lập trình một web application, bạn phải import các thư viện của javascript và css như Boostrap, AngularJS, JQuery… Cách bạn thường dùng là gì? Lên trang chủ của các thư viện này tải về các thư viện boostrap.min.css, angular.min.js, jquery.min.js rồi sau đó copy vào project của mình phải không?

Vậy sao bạn không dùng thư Bower, một công cụ giúp hỗ trợ download và cài đặt các thư viện (package) cho các dự án về web. Với Bower, bạn có thể dễ dàng tải một thư viện chỉ với 1 dòng command line.

Không những thế, Bower còn giúp bạn quản lí các package mà bạn sử dụng cho project của mình. Nếu bạn sử dụng Git để làm việc nhóm, thay vì phải commit lên các thư viện mà bạn sử dụng, với Bower bạn chỉ cần commit các source code của mình kèm với file quản lí của Bower là bower.json. Khi đó, các đồng nghiệp của bạn chỉ cần pull về máy các source code của bạn kèm với file bower.json và sau đó cài đặt các thư viện được lưu trong trong file bower.json.

Cài đặt Bower:

Bower yêu cầu bạn phải cài đặt nodejs, npm git trước khi sử dụng.

Sau đó, bạn sử dụng command line để cài đặt Bower với lệnh:

Sử dụng Bower:

Để sử dụng Bower cài đặt các package, đầu tiên bạn cần mở command line tại project của mình. Trên windows, để mở nhanh một command line window tại thư mục hiện tại, bạn có thể ấn tổ hợp phím SHIFT + Chuột phải và chọn Open command line window here.

mo-command-line-tren-windows

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:

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

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ì:

Quản lí package với bower:

Ở bước trên, bạn chỉ mới cài đặt các pakage. Để lưu các package này vào file quản lí của bower, bạn dùng các lệnh sau:

Lệnh này sẽ tạo ra một file là bower.json trong project. Khi dùng command line, nó sẽ hỏi bạn nhiều thử để cấu hình cho file json này, bạn có thể tùy chỉnh hoặc đơn giản là nhấn ENTER nhiều lần để thông tin mặc định :).

File bower.json dùng để lưu thông tin về các package mà bạn sử dụng.

Sau đó, giả sử bạn muốn cài thư viện JQuery và lưu thông tin vào file bower.json thì ta thêm tham số –save như sau:

Sau đó, ngoài thư viện jquery được tải về máy của bạn thì file bower.json sẽ lưu thông tin lại. Bạn thử mở file bower.json lên nhé, bạn sẽ thấy lưu thông tin cài đặt về thư viện jquery.

bower-example

Thư viện jquery được mô tả là đang sử dụng phiên bản 2.2.0

Cài đặt các package lưu trong bower.json:

Đặt tình huống, bạn tải về source code từ đó đâu đó về (github chẳng hạng). Trong project đó có file bower.json chứa thông tin các thư viện sử dụng. Để cài đặt các thư viện này, bạn dùng lệnh :

Khi đó, toàn bộ thư viện cần thiết sẽ được tải về. Quá tiện lợi phải không nào?

0 nhận xét: