Introduction
Developing clean coded websites at speed has always been a challenge for developers. This article will span over four posts and hopefully will encourage the speedy developer in you to learn of four fantastic tools and their impact to improving your workflow. The four particular tools which I have lined up are: Bower, Emmet/Zen Coding, Grunt/Gulp and Sass. Each have their own little unique way of speeding up the way you develop day to day.
Bower Package manager
Bower in essence is a package manager which allows you to control all; utilities, libraries, assets and frameworks inside of your project. It works by grabbing the specified package from github and installing it to a particular directory inside your project. Once your third party packages are installed you can reference them, no need to go routing around google/github for a particular package.
Setup Bower
Bower is extremely easy to setup and use all that is required is nodeJs, Git and a little JSON know how. First thing you will have to do is to of-course install Git and NodeJs. NodeJs comes automatically with a package called NPM, NPM is a package manager for node and allows us to easily install bower on to any project or install it globally.
Once these packages are installed you will need to run this command in the terminal / console.
$ npm install bower
What this command will do is install bower globally on your machine so you can type bower commands directly into the terminal/console. Now the only thing left to do is use it on a project. To initialize bower it’s as easy as navigating to your project’s directory and running:
$ bower init
This will run you though the setup of a bower.json file which will act as the manifest file storing a list of all the packages installed with this particular project. Now that’s sorted you can now use bower normally installing as many packages as you like. Below are some examples of how to use it.
$ bower install jquery
$ bower install bootstrap
$ bower install git://github.com/user/package.git
$ bower install http://example.com/script.jsA full list of bower packages can be found on Bower search
One of the main advantages of using bower is that it gives a great overview of what third party packages are installed and offers a simple and easy way to install and uninstall them.
Bower can also be used with Grunt and gulp as you will find out in a later article.
Bower Configuration
Another file which may be added is .bowerrc this manages many other configuration settings directly relating to your project, you can read up on it on the config docs page. I like to use the .bowerrc file to redirect where my packages are installed to; this helps me manage my file structure more effectively.
{
"directory": "app/components/"
}You can register your project with bower so it may be installed on other projects providing the project adheres to these rules:
- The package name must adhere to the bower.json spec
- There must be a valid manifest JSON in the current working directory.
- Your package must be publically available at Git endpoint (e.g., GitHub). Remember to push your Git tags!
- For private packages (e.g. GitHub Enterprise), please consider running a private Bower registry
Conclusion
Bower is a very helpful tool however, it does have its drawbacks. One of them is your project size, adding entire third party libraries into your project can get very heavy. Fortunately there is a solution, which I stumbled upon very recently. There is a gulp task which you can download, this will only download the “main” files of any bower package, I will cover more about this on the grunt/gulp article.
Overall Bower is a very useful tool and something I can really see implementing into my workflow. Hopefully it can help you too!