Good text recommendation series--------(1) Bower---Manage your client dependencies

Good text original address: http://segmentfault.com/a/1190000000349555

Editor's note: We found a more interesting series of articles "30 days to learn 30 new technologies", ready to translate, one-day update, year-end package. The following is the first day of technical translation.

I decided to choose the first day of my study as bower.

What is Bower?

Bower is a client-side technology Package Manager that 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, are described in a later article.

Why would I care about bower?

1. Save time. The first reason why you should learn Bower is that it will save you time to find a client-side dependency. Every time I need to install jquery, I need to go to the jquery website to download the package or use the CDN version. But with Bower, you only need to enter a command, jquery will be installed on the local computer, you do not have to remember the version number and so on, you can also use the Bower Info command to see any library information.

2. Work offline. Bower will create a. Bower folder in the user's home directory, which will download all the resources and install a package so that they can be used offline. If you are familiar with Java,bower is a . M2 warehouse similar to the current popular MAVEN build system. Every time you download any repository you will be installed in two folders-one in the application folder and the other in the user home directory. Bower folder. So the next time you need this repository, you'll use the version in the user's home directory. Bower.

3. Client dependencies can be easily demonstrated. You can create a file named Bower.json, in which you can specify dependencies for all clients, and any time you need to figure out which libraries you are using, you can refer to this file.

4. Make it easy to upgrade. Assuming that a new version of a library has released an important security patch, in order to install the new version, you only need to run one command, and Bower will automatically update all dependencies on the new version.

Prerequisite Preparation

In order to install Bower, you first need to install the following files:

1. Node: Download the latest version of node. js
2. NPM:NPM is the node Package Manager. It's bundled in the Nodejs installer, so once you've installed the NODE,NPM, you're ready to install it.
3. Git: You need to get some code packages from the Git repository.

Installing Bower

Once you have installed all of the necessary files as described above, type the following command to install Bower:

npm install -g bower

This line of command is a global installation of Bower, and the -g operation represents the global.

Getting Started with Bower

After installing bower, you can use all the Bower commands. You can type help commands to see what Bower can do, as follows:

$ bowerHelpUsage:bower <command> [<args>] [<options>]commands:Cache Manage BowerCacheHelp DisplayHelp information on Bower home Opens a package homepageinto your favorite browser info infoof a particular package init interactivelyCreate a Bower.json fileInstallInstall a package locally link Symlink A package folder List ListLocal Packages lookup Look up a package URLBy name Prune removesLocal extraneous packages register a package search search For a package by  name update update a local package uninstall Remove a local packageoptions:- F, --force makes various commands more forceful-j, --json Output consumable json-l, --log-level what level O f logs to Report-o,--offline does not hits the network-q, --quiet only output important information-s, --s Ilent do not output anything, besides Errors-v, --verbose makes output more verbose--allow-root allows running Commands as root              

Installation of the package

Bower is a package manager, so you can use it in your application to install new packages. For example, consider how to install jquery using Bower, create a new folder where you want to install the package, and type the following command:

install jquery

After the above command is complete, you will see a folder in the directory you just created, with the bower_components following directories:

$ tree bower_components/bower_components/└── jquery    ├── README.md    ├── bower.json    ├── component.json    ├── composer.json    ├── jquery-migrate.js    ├── jquery-migrate.min.js    ├── jquery.js    ├── jquery.min.js    ├── jquery.min.map    └── package.json1 directory, 10 files

Use of packages

Now you can use the jquery package in your application and create a simple HTML5 file in jquery:

<!doctype html><Html><Head><Title>learning Bower</Title></Head><Body><Button>animate me!!</Button><Divstyle="Background:red;height:100px;width:100px;position:absolute;" ></Div><ScriptType="Text/javascript"Src="Bower_components/jquery/jquery.min.js" ></script> <script type=  "Text/javascript" > $ (document) . Ready (function () {$ (function () {$ ( "div"). Animate ({left:</script></ body></HTML>    

As you can see, you just quoted the Jquery.min.js file and finished at this stage.

List of all packages

If you want to find out all the packages installed in the application, you can use the List command:

$ bower listbower check-new     Checking for new versions of the project dependencies..blog /Users/shekhargulati/day1/blog└── jquery#2.0.3 extraneous

Search for packages

If you want to use the Twitter bootstrap framework in your application, but you are unsure of the name of the package, you can use the search command:

$ bower search bootstrapSearch results:    bootstrap git://github.com/twbs/bootstrap.git    angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git    sass-bootstrap git://github.com/jlong/sass-twitter-bootstrap.git

Information about the package

If you want to see information about a particular package, you can use the info command to view all the information about the package:

$ Bower Info Bootstrapbower Bootstrap#* not-cached Git://github.com/twbs/bootstrap.git#*bower Bootstrap#* Resolve Git://github.com/twbs/bootstrap.git#*bower Bootstrap#* Download Https://github.com/twbs/bootstrap/archive/v3.0.0.tar.gzbower Bootstrap#* Extract Archive.tar.gzbower Bootstrap#* Resolved git://github.com/twbs/bootstrap.git#3.0.0{Name' Bootstrap ',Versionmain: [ignore: [ ' **/.* '], dependencies: {jquery:  ' >= 1.9.0 '}, homepage:  ' https:// Github.com/twbs/bootstrap '}available versions:-3.0. 0-3.0. 0-RC1-3.0. 0-RC. 2-2.3. 2 ...                 

If you want to get information about a single package, you can also use the info command:

$ Bower Info Bootstrap#3.0.0bower Bootstrap#3.0.0 cached Git://github.com/twbs/bootstrap.git#3.0.0bower Bootstrap#3.0.0 Validate 3.0.0 against git://github.com/twbs/bootstrap.git#3.0.0{ name: ' Bootstrap ', version: ' 3.0. 0 ', main: [ './dist/js/bootstrap.js ', './dist/css/bootstrap.css '], ignore: [ ' **/.* '],  Dependencies: { jquery: ' >= 1.9.0 '}, homepage: ' https://github.com/twbs/bootstrap '} 

Uninstallation of the package

To uninstall a package you can use the uninstall command:

uninstall jquery

Use of Bower.json files

The use of the Bower.json file makes it easier to install the package, and you can create a file named "Bower.json" in the root directory of the application and define its dependencies. bower initto create a Bower.json file using the command:

$ bower init[?] name:blog[?] Version:0.0.1[?] description:[?] main file:[?] keywords:[?] Authors:shekhar Gulati <[email protected]>[?] license:mit[?] Home Page:[?]Set currently installed componentsAs dependencies? Yes[?] Add commonly ignored files to ignore list? Yes[?] Would you like to mark the package as   private which prevents it from being accidentally published To the registry? no{Name: ' blog ', version: ' 0.0.1 ', authors: [ ' Shekhar Gulati <[email protected]> '], License: ' MIT ', ignore: [ ' **/.* ', ' node_modules ', ' bower_components ', ' test ', ' tests '], dependencies: {Jque Ry: ' ~2.0.3 '}}[? Looks good? Yes              

You can view the file:

{  "Name ": "blog", "version": " 0.0.1 "," authors ": [  "Shekhar Gulati <[email protected]>"], "license ": " MIT "," ignore ": [" **/.* ", " Node_modules ",  "bower_components",  "test",  tests "]," dependencies ": {" jquery " :  "~2.0.3"}}        

Note that it has joined the jquery dependency relationship.

Now if you want to use Twitter bootstrap, we can install Twitter bootstrap and update the Bower.json file with the following command:

install bootstrap --save

It will automatically install the latest version of bootstrap and update the Bower.json file:

{  "Name ":"Blog", "Version ": "0.0.1", "authors": [" Shekhar Gulati <[email protected]> "]," license ": " MIT "," ignore": [ "**/.*",  "Node_modules",  "bower_components",  "test", " tests "]," dependencies ": {" jquery":  "~2.0.3", " Bootstrap ": " ~3.0.0 "}}       

This is today's study, hope can let you have a sufficient understanding of bower, it is best to try it yourself.

Good text recommendation series--------(1) Bower---Manage your client dependencies