Thông báo


Chia sẻ
Tùy chọn
Xem bài viết cuối
Offline admin  
#1 Đã gửi : 16/02/2016 lúc 08:56:07(UTC)

Danh hiệu: Administration

Chức danh:

Nhóm: Administrators
Gia nhập: 23-07-2013(UTC)
Bài viết: 6,117
Viet Nam
Đến từ: Vietnam

Cảm ơn: 10 lần
Được cảm ơn: 2 lần trong 2 bài viết

How to Install, Update & Remove Web Libraries Easily With Bower

To build a website, we commonly rely on a number of libraries, be it in the form of CSS or JavaScript. If I would build a small website that will display an image slideshow, for example, the website probably would need jQuery and a jQuery plugin, Flexslider. These libraries are the dependencies for the website to function.

While adding these libraries should be an easy task, when it comes to a large-scale website which requires more libraries, everything could be cumbersome and messed up from the beginning. You may have to trawl from one repository to another repository, downloading each of the libraries, extracting the packages, and finally putting them in your project directory.

When the new version becomes available you will have to be doing all of that again (sounds like a lot of work, right?).

If that sounds like what you have been doing for ages, this article may be worth a read. Here we will show you a handy tool called Bower that makes managing website libraries a breeze. Let’s check it out.

Getting Started

To use Bower, you have to install Node.js. Since Bower is based on Node.js, you should be able to run Bower on every platform: Windows, Mac, and Linux.

Once you have installed Node.js, open Terminal (or Command Prompt) and run this command line to install Bower.

npm install -g bower

Installing Libraries

Now we are ready to use Bower. Let’s start by searching a library that we want to put in our project directory. Assuming that you are currently inside the directory, you can type bower search {name of the library}. Here, for example, I searched for Normalize.css, a library to make an element’s style consistent in all browsers.

bower search normalize

The command will list a bunch of results; not only that it gives us the original Normalize, it also shows us Normalize versions that have been converted to LESS, Sass, Stylus, and the other platforms.

Once we have picked which one to install, we can type bower install {{name of the repository}}. In this example, I will install Normalize LESS as well as jQuery.

bower install normalize-less jquery

This command will download the latest version of normalize-less and jQuery, and save it in a new folder named bower_components; you should now find the folder created in your project directory.

Alternately, if you want to install the older version of the library, you can run the command followed with the version number, this way.

bower install jquery#1.10.0

Now that we have the libraries, Normalize and jQuery, in our project directory, we can use them by referencing the jQuery from the bower_components folder in the HTML document and import Normalize LESS in the other LESS stylesheet.


<script src="bower_components/jquery/jquery.min.js"></script>


@import "bower_components/normalize-less/normalize.less";

If one of the libraries is no longer used in the website, you can uninstall it easily with bower uninstall command, like so.

bower uninstall normalize-less

Updating The Bower Components

Let’s say you have been working on your project for several months, and some libraries that you are using (like jQuery) have released a new version. In this circumstance, we can use Bower to update jQuery to the latest version. But first let’s check out whether the new version has been registered in bower with bower list command.

The latest version of jQuery, as you can see below, is 2.1.1.

To update jQuery, we can type bower update jquery. Once the update has completed, you can run bower list command again to verify the current installed version. Below, as you can see, we now have the latest version of jQuery.

Wrap Up

Bower is a really handy tool that I think you should leverage in your project. It’s like having an AppStore, but for your website stuff – we can install, update, and remove libraries conveniently.

Ai đang xem chủ đề này?
OceanSpiders 2.0
Chủ đề tương tự
How to Control Change Requests? (PMP)
Bởi admin 23-08-2019 lúc 11:20:58(UTC)
How to Write a Resignation Letter (Môi trường làm việc)
Bởi admin 22-08-2019 lúc 04:43:42(UTC)
How to Decline a Job Offer (Môi trường làm việc)
Bởi admin 22-08-2019 lúc 04:42:44(UTC)
How to deal with the limits of Azure SQL Database maximum logins? (SQL Server)
Bởi admin 16-05-2019 lúc 01:46:54(UTC)
How to Set Time Limit for Idle Remote Desktop Sessions (Window Server)
Bởi admin 25-12-2018 lúc 12:01:11(UTC)
How to set time limit for disconnected sessions Windows Server 2012R2 (Window Server)
Bởi admin 25-12-2018 lúc 11:49:48(UTC)
How to use session storage in ASP.Net Core? (.NET Core)
Bởi admin 21-11-2018 lúc 11:32:03(UTC)
How to check which .NET Core version is installed? (.NET Core)
Bởi admin 19-11-2018 lúc 04:42:00(UTC)
How to delete a workspace using the tf command (Quản lý dự án trong lập trình)
Bởi admin 31-07-2018 lúc 01:15:17(UTC)
Bởi admin 29-08-2017 lúc 03:00:25(UTC)
How to use BundleMinifier? (MVC Web Application)
Bởi admin 04-07-2017 lúc 05:43:18(UTC)
How to Ask for, Grant and Deny Favors (Nghệ thuật ứng xử với sếp)
Bởi admin 27-06-2017 lúc 06:08:09(UTC)
How to convert File to byte[] (Java)
Bởi admin 19-04-2017 lúc 10:56:09(UTC)
How to use SET vs SELECT (SQL Server cơ bản)
Bởi admin 30-11-2016 lúc 09:35:43(UTC)
How To Select Alternate Rows From A Table In SQL Server (SQL Server cơ bản)
Bởi admin 23-11-2016 lúc 05:44:28(UTC)
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET | YAF.NET © 2003-2021, Yet Another Forum.NET
Thời gian xử lý trang này hết 0.395 giây.