Along with Grunt, another tool I’ve been playing around with is Bower.
What is Bower? It’s a package manager for the web, duh!
Ok, let’s back up. What does that even mean?
Two bits of information should help clarify:
- The origin of the name “bower”.
- A better understanding of what packages are.
Let’s dive in…
The Name
I’m going to quote directly from Bower’s About page:
Bower is named after the bowerbird, a family of birds where males build a structure [the bower] and decorate it with sticks and brightly coloured objects in an attempt to attract a mate. Bower does just that. Bower brings together bits and pieces from across the forest so you can build your structure.
Despite the Commonwealth spelling of “colored”, this helped me make sense of what is going on with Bower, at least as I understand it.
When putting together a site for a client, I’m using different front-end components and frameworks to build the look of the site. Sometimes I’m using Genesis, and sometimes I’m using a theme. I’ve started to look into using other front-end frameworks and technologies like Bootstrap, Foundation, Animate.css, Masonry.js, and the list goes on.
So, how do I keep these different assets, or “packages” managed and updated with the latest features? Do I even want to do this?
Using Bower to Keep Things Current
Once Bower is installed, and I have called in different packages, if there are updates to those packages, I can simply run the command bower update in the command line to cycle through all my packages and update components.
This is something similar to the dreaded (or welcome!) WordPress updates that happen fairly regularly. WordPress core or plugin authors will push out an update to their plugins, and these typically require a manual update to the site (auto updates are available now as well). Updating to the latest version provides at least three benefits:
- The latest source code
- Compliance with web and platform standards
- Security updates
Yes, I Want the Updates
If it behooves me to keep my WP core, themes and plugins up to date, then maybe I want Bower to help manage regular updates to these front-end packages (a.k.a. dependencies) as well.
Fairly simple to update and plenty of benefit in doing so. I’ll take it!
All you have to do is install Bower in your project files by navigating to your current theme directory, and start installing packages with bower install and then the package name. So something like bower install jquery is a great example.
You can search the available Bower packages here, or you can install a package from a Git endpoint or URL.
It’s not hard at all. Much easier than a task runner!
I’m sure there will be more on this later. For now, it’s fairly straightforward.
Peace,
Nate