Front-end package management tool bower installation and introduction

What is bower?

Bower is a software package manager for client technology. It can be used to search, install, and uninstall network resources such as JavaScript, HTML, and CSS. Other development tools based on Bower, such as YeoMan and Grunt
In my words, bower is a front-end package management tool like PHP Composer, Python pip, and Ubuntu apt-get, that is, you can define which packages to use, such as jquery, to conveniently download and manage them in a unified manner.

Use bower

Open the "background management" directory, as shown in the following figure:

Bower_json

There is a bower. json file and a bower_components folder. (The boewr_components folder is created by the bower tool)

Open the bower. json file:

{
"Name": "startbootstrap-sb-admin-2 ",
"Version": "1.0.8 ",
"Homepage": "http://startbootstrap.com/template-overviews/sb-admin-2 ",
"Authors ":[
"David Miller"
],
"Description": "A free, open source, Bootstrap admin theme created by Start Bootstrap ",
"Keywords ":[
"Bootstrap ",
"Theme"
],
"License": "Apache-2.0 ",
"Ignore ":[
"**/.*",
"Node_modules ",
"Bower_components ",
"Test ",
"Tests ",
"Pages ",
"Index.html ",
"/Js"
],
"Main ":[
"Dist/css/sb-admin-2.css ",
"Dist/js/sb-admin-2.js"
],
"Dependencies ":{
"Bootstrap ":"~ 3.3.6 ",
"Datatables ":"~ 1.10.4 ",
"Datatables-plugins ":"~ 1.0.1 ",
"Flot ":"~ 0.8.3 ",
"Font-awesome ":"~ 4.2.0 ",
"Holderjs ":"~ 2.4.1 ",
"MetisMenu ":"~ 1.1.3 ",
"Morrisjs ":"~ 0.5.1 ",
"Datatables-responsive": "1.0.6 ",
"Bootstrap-social ":"~ 4.8.0 ",
"Flot. tooltip ":"~ 0.8.4"
  }
}
This file defines the front-end packages to be used and the release path. main is the directory to which these packages are stored, and dependencies defines the packages used.

With this bower. json file, it is very easy to install these packages.

My background is built with Laravel. The static resource folder is under the public folder in the root directory, and the static resources in the background are under the/public/assets/admin folder. copy the json file, as shown in the following figure:

Laravel_bower_json

Enter the directory in the VM and run the bower command:

JavaScript

Bower install
In this way, the installation starts. If the bower command does not exist, install the bower tool first. This article does not introduce the installation of the bower.

The installation process is shown in the following figure.

Bower_install1

Bower_install2

After the installation is complete, there will be an additional bower_components directory in the folder, which contains the installed js and css packages.

It is very convenient to install, update, and delete packages by using the bower method. The previous manual file download and manual update processes are automated to make development faster and more standardized.

Set git ignore

If you use bower to manage js and css packages, you do not need to submit these packages to the version Library. You can set ignore in git and submit bower. for json files, you can use the bower tool on the server to install these packages without worrying about inconsistent file versions.

Install and use the bower tool to manage front-end resources

To install the bower tool on CentOS, you must first install nodejs and npm. Take CentOS 7 as an example:

Yum install nodejs

Yum install npm

After node and npm are installed, use nmp to install the bower tool:

Npm install-g bower

-G indicates global installation

After the bower tool is installed, let's use it.

Here is a bower. json file that defines the js and css extension packages needed, that is, front-end resources.

The entire bower. json file is as follows:

{
"Name": "startbootstrap-sb-admin-2 ",
"Version": "1.0.8 ",
"Homepage": "http://startbootstrap.com/template-overviews/sb-admin-2 ",
"Authors ":[
"David Miller"
],
"Description": "A free, open source, Bootstrap admin theme created by Start Bootstrap ",
"Keywords ":[
"Bootstrap ",
"Theme"
],
"License": "Apache-2.0 ",
"Ignore ":[
"**/.*",
"Node_modules ",
"Bower_components ",
"Test ",
"Tests ",
"Pages ",
"Index.html ",
"/Js"
],
"Main ":[
"Dist/css/sb-admin-2.css ",
"Dist/js/sb-admin-2.js"
],
"Dependencies ":{
"Bootstrap ":"~ 3.3.6 ",
"Datatables ":"~ 1.10.4 ",
"Datatables-plugins ":"~ 1.0.1 ",
"Flot ":"~ 0.8.3 ",
"Font-awesome ":"~ 4.2.0 ",
"Holderjs ":"~ 2.4.1 ",
"MetisMenu ":"~ 1.1.3 ",
"Morrisjs ":"~ 0.5.1 ",
"Datatables-responsive": "1.0.6 ",
"Bootstrap-social ":"~ 4.8.0 ",
"Flot. tooltip ":"~ 0.8.4"
  }
}
Then run the following command:

Bower install

You can.

If the bower ESUDO Cannot be run with sudo prompt is displayed, you use the root permission to execute the command. By default, the bower does not allow the root permission to execute the command. Then a parameter-allow-root is included, as shown below:

Bower install-allow-root

After the installation is complete, the folder contains an additional bower_components directory, which contains the js and css resources required for storage. This is much more convenient. If you want to use jquery, you can simply write jquery and the version, as well as various js and css resources such as bootstrap.