BOWER LÀ GÌ, NGHĨA CỦA TỪ BOWER, QUẢN LÝ TÀI NGUYÊN FRONTEND VỚI BOWER

Xin chào các bạn, lười quá, mấy tuần rồi, giờ mới ngồi gõ lạch cạch viết bài, hôm nay chúng ta sẽ tìm hiểu xem Bower là cái gì và tại sao nên dùng nó trong ứng dụng web nhé. Cụ thể hơn thì mình sẽ hướng dẫn ứng dụng nó vào trong Framework Laravel.

Bạn đang xem: Bower là gì, nghĩa của từ bower, quản lý tài nguyên frontend với bower

Những nội dung có trong bài này:

1. Bower là gì?, tại sao nên dùng nó?

2. Cấu hình Bower với Laravel.

3. Tự tạo một gói Bower cho riêng mình.

1 – Bower là gì? Tại sao nên dùng nó?

Theo định nghĩa chuyên ngành thì Bower nó là công cụ quản lý các nguồn tài nguyên cho việc lập trình front-end. Được phát triển và Open Source bởi Twitter.

Nghe cứ thấy cảm giác mơ hồ nhỉ? Thử xem các trường hợp sau nhé:

Kịch bản thứ nhất: hãy tưởng tượng Project của bạn có khoảng mấy chục cái thư viện CSS, JS như Jquery, Bootstraps, FontAwesome….vv. Một ngày đẹp trời nào đó, sếp đẹp trai (xinh gái) của bạn yêu cầu cập nhật tất cả các thư viện đó lên phiên bản mới nhất thì sao? Lúc này không lẽ ta lại lên từng trang một dowload từng thư viện một sau đó về bỏ lại vào project, sửa tên file…bla..bla… sao?

*

“Thằng ở trên chém gió đấy, dùng Bower làm gì cho mất công, cứ luyện tập tính kiên nhẫn update từng thư viện một đi cho quen tay, nâng trình độ di chuột + gõ bàn phím lên master luôn.”

Tới kịch bản thứ hai là sau khi đã update xong bằng tay kịch bản 1. Việc tiếp theo bạn cần triển khai push code lên github để cho các “bạn cùng team”có thể lấy bộ source code mới nhất về. Oke cứ đẩy lên như bình thường thôi, tính ra mỗi thư viện có khoảng ít thì hơn chục, mà nhiều thì vài chục file code, chưa kể có thư viện lại import khoảng mấy trăm file fonts, icons, images…Tính sơ sơ thì cũng cả nghìn file rồi.

– Đã có lần mình ngây thơ hồn nhiên push một project với hơn 5k files changed lên github để cho anh trainer đẹp trai của mình kiểm tra và merge code vào nhánh chính. Cảm giác lúc đó …

*

“Cho đến hiện tại thì mình vẫn đang giữ kỷ lục 5k files này (─‿‿─) “

– Có những nơi làm việc không để ý vấn đề này lắm nhưng nếu ở một môi trường yêu cầu Clean Code, No Convensions … thì đảm bảo làm cách trên kia bạn sẽ “ăn hành” no =)). Và Bower sinh ra để giải quyết vấn đề này.

2 – Cấu hình Bower với Laravel.

Xem thêm: Tiểu Sử Diễn Viên Nhã Phương : Năm Sinh, Sự Nghiệp Và Đời Tư

-Trong phần này, mình sẽ hướng dẫn từng bước cách setup và triển khai Bower với Framework Laravel.


{ "name": "framgia_event", "description": "", "main": "", "authors": < "motoavangard.com " >, "license": "MIT", "homepage": "https://github.com/motoavangard.com/framgia_event", "private": true, "ignore": < "**/.*", "node_modules", "bower_components", "test", "tests" >, "dependencies": { "bootstrap": "https://github.com/twbs/bootstrap.git#^3.3.7", "jquery-flexdatalist": "https://github.com/sergiodlopes/jquery-flexdatalist.git#^2.2.2", "font-awesome": "https://github.com/FortAwesome/Font-Awesome.git#^4.7.0", "font-icons-trungquan17": "https://github.com/motoavangard.com/font-icons.git", "AlertifyJS": "https://github.com/MohammadYounes/AlertifyJS.git#^1.11.0", "eonasdan-bootstrap-datetimepicker": "^4.17.47", "photoset-grid": "^1.0.1", "pusher-js": "pusher#^4.2.1" }}-Tiếp theo tạo một file có tên là .bowerrc để config đường dẫn nơi mà ta lưu các thư viện code lấy từ bower về, file này nằm ngang hàng với bower.json, nội dung của .bowerrc như sau:

{ "directory": "public/bower_components/"}-Một bước nữa, vào file .gitignore thêm dòng này vào:

/public/bower_components-Mục đích là để không đẩy những file thư viện code trong /public/bower_componentslên git mỗi lần mình commit với push.

Kể từ bây giờ, muốn cài một thư viện bên thứ 3 nào, chúng ta sẽ dùng câu lệnh sau:

bower install --save

Khi đó gói thư viện sẽ được cài và đồng thời –save sẽ lưu thông tin tương ứng của gói thư viện đó vào file bower.jsonTương tự nếu muốn gỡ bỏ một package nào đó:

bower uninstall --save

Và sau này nếu muốn update version của các thư viện lên phiên bản mới nhất thì chỉ cần:

bower update

-Ví dụ cụ thể bây giờ mình muốn cài gói thư viện Font-Awesome vào project thông qua bower như sau:

Bước 2: Copy link Clone của repo này:

*


Bước 3: Quay lại Terminal và gõ:

bower install --savehttps://github.com/FortAwesome/Font-Awesome.git

-Khi này trong file bower.json đã lưu thông tin của thằng Font Awesome và đồng thời mã nguồn thư viện được lưu tại /public/bower_components/font-awesome/

-Đơn giản phải không nào? Tiếp tục nhé, thế nếu như bây giờ mình lên bower.io search một thư viện mà không ra thì sao? Tức là thư viện đó chưa được Bower hỗ trợ. Lúc này mình phải tự đẩy thư viện đó lên một repo github của riêng mình và đăng ký nó với Bower.

Nếu các bạn để ý thì ở file bower.json ở trên của mình có 1 dòng trong dependencies:

"font-icons-trungquan17": "https://github.com/motoavangard.com/font-icons.git",Đó là một Repo với hơn 2000 file fonts mà mình cần dùng cho project. Cụ thể các bước thực hiện sẽ ở phần tiếp theo dưới đây.

3 – Tự tạo một gói Bower cho riêng mình.
Như đã nói ở bước trên, không phải lúc nào những thư viện mà chúng ta cần cũng được Bower hỗ trợ, lúc này chính chúng ta là người đăng ký thư viện đó với Bower để sử dụng.