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

Xin chào chúng ta, lười thừa, mấy tuần rồi, giờ đồng hồ bắt đầu ngồi gõ lạch cạch viết bài, từ bây giờ chúng ta đang mày mò coi Bower là cái gì với tại vì sao yêu cầu cần sử dụng nó trong áp dụng web nhé. Cụ thể hơn vậy thì mình đã khuyên bảo vận dụng nó vào vào 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 câu chữ có vào bài bác này:

1. Bower là gì?, tại vì sao phải sử dụng nó?

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

3. Tự tạo thành một gói Bower mang lại riêng biệt bản thân.

1 – Bower là gì? Tại sao đề nghị sử dụng nó?

Theo tư tưởng siêng ngành thì Bower nó là qui định thống trị những mối cung cấp tài nguyên mang lại việc thiết kế front-kết thúc. Được trở nên tân tiến và Open Source vày Twitter.

Nghe cđọng thấy xúc cảm mơ hồ nhỉ? Thử xem các ngôi trường vừa lòng sau nhé:

Kịch phiên bản lắp thêm nhất: hãy tưởng tượng Project của người tiêu dùng có tầm khoảng mấy chục chiếc thỏng viện CSS, JS nhỏng Jquery, Bootstraps, FontAwesome….vv. Một ngày đẹp nhất ttách làm sao kia, sếp đẹp nhất trai (xinh gái) của người sử dụng đề nghị update toàn bộ các thỏng viện kia lên phiên phiên bản mới nhất thì sao? Hiện nay dễ thường ta lại lên từng trang một dowload từng thư viện một sau đó về quăng quật lại vào project, sửa tên file…bla..bla… sao?

*

“Thằng ở bên trên ba hoa đấy, cần sử dụng Bower làm những gì cho mất công, cứ luyện tập tính kiên trì update từng tlỗi viện một đi mang đến quen tay, nâng chuyên môn di con chuột + gõ keyboard lên master luôn.”

Tới kịch phiên bản trang bị hai là sau thời điểm vẫn update hoàn thành bằng tay kịch phiên bản 1. Việc tiếp theo bạn phải triển khai push code lên github làm cho các “các bạn thuộc team”có thể rước cỗ source code mới nhất về. Oke cứ đọng đẩy lên nlỗi thông thường thôi, tính ra từng thỏng viện có khoảng không nhiều thì rộng chục, nhưng mà những thì vài chục file code, chưa tính gồm thư viện lại import khoảng chừng mấy trăm tệp tin fonts, icons, images…Tính sơ sơ thì cũng cả ngàn tệp tin rồi.

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

*

“Cho mang đến hiện thời thì bản thân vẫn đang giữ kỷ lục 5k files này (─‿‿─) “

– Có hầu hết địa điểm làm việc ko để ý vụ việc này lắm tuy nhiên trường hợp tại 1 môi trường xung quanh thử khám phá Clean Code, No Convensions … thì đảm bảo có tác dụng giải pháp bên trên kia các bạn sẽ “nạp năng lượng hành” no =)). Và Bower hiện ra để giải quyết và xử lý vấn đề này.

2 – Cấu hình Bower cùng 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 đã hướng dẫn từng bước giải pháp thiết lập cùng thực thi Bower cùng 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 chế tác một file mang tên là .bowerrc nhằm config đường truyền nơi mà lại ta lưu giữ các thư viện code lấy từ bower về, file này nằm hướng ngang sản phẩm với bower.json, nội dung của .bowerrc nlỗi sau:

"directory": "public/bower_components/"-Một bước nữa, vào tệp tin .gitignore thêm chiếc này vào:

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

Kể tự hiện giờ, ý muốn thiết lập một tlỗi viện mặt đồ vật 3 nào, bọn họ vẫn cần sử dụng câu lệnh sau:

bower install --save

Khi kia gói thư viện sẽ tiến hành mua cùng đồng thời –save sẽ lưu biết tin khớp ứng của gói thỏng viện đó vào file bower.jsonTương từ nếu muốn gỡ vứt một package nào đó:

bower uninstall --save

Và trong tương lai nếu như muốn update version của những thỏng viện lên phiên bạn dạng mới nhất thì chỉ cần:

bower update

-lấy ví dụ như cụ thể hiện nay mình muốn cài đặt gói tlỗi viện Font-Awesome vào project thông qua bower như sau:

Cách 2: Copy link Clone của repo này:

*


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

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

-Lúc này trong file bower.json sẽ lưu giữ đọc tin của thằng Font Awesome với mặt khác mã mối cung cấp thỏng viện được giữ tại /public/bower_components/font-awesome/

-Đơn giản cần không nào? Tiếp tục nhé, vậy trường hợp nhỏng bây chừ mình lên bower.io search một thỏng viện cơ mà ko ra thì sao? Tức là tlỗi viện đó không được Bower cung cấp. Trong thời điểm này mình buộc phải từ đẩy thỏng viện kia lên một repo github của riêng mình cùng đăng ký nó với Bower.

Nếu chúng ta lưu ý thì ở tệp tin bower.json sinh hoạt bên trên của bản thân có 1 chiếc vào dependencies:

"font-icons-trungquan17": "https://github.com/motoavangard.com/font-icons.git",Đó là 1 Repo với trên 2000 tệp tin fonts cơ mà mình cần cần sử dụng mang đến project. Cụ thể quá trình tiến hành sẽ ở phần tiếp sau tiếp sau đây.

3 – Tự tạo ra một gói Bower đến riêng biệt bản thân.
Nhỏng đã nói làm việc bước trên, chưa phải lúc như thế nào phần lớn tlỗi viện cơ mà họ đề nghị cũng rất được Bower cung cấp, lúc này chính chúng ta là fan đăng ký thỏng viện kia cùng với Bower nhằm áp dụng.