March 30, 2016

How to install bower on windows?

How to install bower on windows?

In this blog post you are going to learn how to get up and running with Bower. You’ll start by installing the Bower command-line utility and then go on to learn about the various commands that are available for managing packages.

Installing Bower

Bower can be installed using npm, the Node package manager. If you don’t already have npm installed, head over to the Node.js website and download the relevant copy of Node.js for your system. The npm program is included with the install of Node.js.

You can see here how you can install node.js in detail. Click here!

Once you have npm installed, open up Terminal (or Command Prompt) and enter the following command:

npm install -g bower

This will install Bower globally on your system.

Now that you have Bower installed, we can start looking at the commands that are used to manage packages.

Finding Packages

To search for packages on the command line you use the search command. This should be followed by your search query.

bower search <query>

For example to search for packages that contain the word ‘jquery’ you could do the following:

bower search jquery

This command would return a whole bunch of results, some of which are displayed in the snippet below.

jquery git://github.com/components/jquery.git
jquery-ui git://github.com/components/jqueryui
jquery.cookie git://github.com/carhartl/jquery-cookie.git
jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
jasmine-jquery git://github.com/velesin/jasmine-jquery
jquery.ui git://github.com/jquery/jquery-ui.git
...

Each result displays the name of the package and a Git endpoint. You will need either the name or Git endpoint to install a package.

Installing Packages

To add a new Bower package to your project you use the install command. This should be passed the name of the package you wish to install.

bower install <package>

As well as using the package name, you can also install a package by specifying one of the following:

  • A Git endpoint such as git://github.com/components/jquery.git
  • A path to a local Git repository.
  • A shorthand endpoint like components/jquery. Bower will assume that GitHub is being used, in which case, the endpoint is the part after github.com in the repository URL.
  • A URL to a zip or tar file. The files contents will be extracted automatically.

You can install a specific version of the package by adding a pound-sign (#) after the package name, followed by the version number.

bower install <package>#<version>

Installed packages will be placed in a bower_components directory. This is created in the folder which the bower program was executed. You can change this destination using the configuration options in a .bowerrc file.

Once installed, you can use a package by simply adding a <script> or <link> tag to your HTML markup. Although Bower packages most commonly contain JavaScript files, they can also contain CSS or even images.

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

Listing Installed Packages

You can easily find out which packages are installed using the list command.

bower list

Updating Packages

Updating a package is pretty straightforward. If you’ve used a bower.json file you can execute a simple update command to update all of the packages at once. However, the update tool will abide by the version restrictions you’ve specified in the bower.json file.

bower update

To update an individual package you again use the update command, this time specifying the name of the package you wish to update.

bower update <package>

Uninstalling Packages

To remove a package you can use the uninstall command followed by the name of the package you wish to remove.

bower uninstall <package>

It’s possible to remove multiple packages at once by listing the package names.

bower uninstall jquery modernizr sass-bootstrap

Source: http://blog.teamtreehouse.com/getting-started-bower

1 comment:

Popular Posts

Views