The majority of web projects today start with or include third party libraries. If you are working on a WordPress theme, there’s probably a good chance that you are using the HTML5 Boilerplate, Bootstrap, or Foundation. Most of these projects are available on GitHub and accessible via Bower.
In this series I’m going to introduce you to Bower, talk about how it can improve your WordPress theme or plugin development and show you how to set it up in your project.
What is Bower?
What exactly is Bower? According to the project site:
Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack.
Essentially, what that means is Bower gives you a way to specify what libraries (or packages) your project needs for development. It also handles what other projects those projects need as well and handles that for you automatically.
Bower does depend on Node.js and NPM to work, so you need to make sure that you have those installed on your machine. Another requirement for working with Bower is that the repositories need to be on GitHub and added to the Bower Registry.
Third-Party Libraries
Like I mentioned before, there’s probably a good chance that you are using a third party library in your project. You probably have gone to GitHub and downloaded the project then placed the appropriate files in your project. You would need to rinse and repeat for each library your project needs.
With Bower, you can easily install (or download) these third-party libraries without needing to go to GitHub. All of the libraries you install with Bower will be placed into a bower_components folder inside your project’s root folder. All of this can be done via the command line so there’s no need to flip back and forth to a browser.
Managing Dependencies
Another great feature of Bower is that it manages dependencies for you. It looks at all the packages your project needs and the packages they need as well. Each package might require a specific version of another package, like a specific version of jQuery.
So, for example, let’s say your project requires jQuery. You also decide to use both Bootstrap and FitVids as well with your project. Bower will look at all of the different packages and all the versions of packages they rely on as well and figure out what is version needed for all. If there are any conflicts, Bower will let you know.
Who wants to keep track of all the required versions of everything anyway?
No Project Bloat
I mentioned before that all of the packages you install will be placed into a bower_components folder. You can access anything in that folder during your local development, but you don’t need to add it to your project’s repository.
Let’s say you want to use Bootstrap for the layout of your theme and you are using Sass to compile your stylesheets into the style.css file. You can use the bootstrap-sass-official project and simply import the bootstrap.scss file into your existing project .scss files.
I will go into more detail around how to do this in another post.
Conclusion
I talked about what Bower is and how it helps you work with third-party libraries in your project. I also talked about how it can help you manage your dependencies and remove some bloat to your project’s repository.
In the next post I plan on talking more about how it can improve your WordPress development. Whether you are the only developer or working with a larger team, you will see how this benefits for you.
Resources
- HTML5 Boilerplate
- Bootstrap
- Foundation
- Bower
- Node.js
- NPM
- GitHub
- Bower Registry
- FitVids
- bootstrap-sass-official
