All responsible/good front-ender developers use some kind of package management these days, whether it be in the form of Composer, Node Package Manager, Component or Bower. If you’re not using package management for your code, it’s not too late to start.
The power of Bower (ha, that rhymes)
The true value of a front-end package manager like Bower is shown when you implement it into your WordPress themes. Have you ever had to update jQuery on a clients WordPress site you built 3 years ago or even on your own sites? I have and it’s not pretty.
Before we can even install Bower, we need Node.js. I won’t cover how to install Node.js, but if you’re on a UNIX based system, it’s easy to install.
We need to install the Bower Node package globally by running the following command from our command line:
npm install -g bower
A task runner
An important step I often see overlooked is the fact if you’re using Bower in your WordPress themes and or web projects, you are going to need a task runner. The bower_components directory is meant for local development and should not be uploaded to your server. You don’t upload your node_modules folder from your local version, so don’t do it for Bower components either.
A couple of good choices are GulpJS and GruntJS. There are others, but they’re the two contenders with great support. Personally I find GulpJS to be a lot easier to use and configure, perfect for someone new to the whole task-runner thing.
I won’t go into details as to how you can setup and use a task runner for your Bower components, there are a lot of resources out there telling you how to do so though.
Integrating Bower into WordPress
Install some dependencies
Now we have successfully installed Bower, navigate to your WordPress theme directory. Open up a terminal/command line prompt and navigate to the same directory and then type the following to generate a Bower package file:
This will create a bower.json file in your theme directory (provided Bower was installed correctly).
For this example we are going to install jQuery because, well, everyone mostly uses jQuery in their projects. Simply type the following to get a shiny new version of jQuery (which using the –save directive will be added to our bower.json):
bower install jquery --save
But, wait! What if we want to install a particular version of jQuery? Bower allows you to specify a version using a version directive, for the sake of this example, lets install jQuery 1.10:
bower install jquery#1.10 --save
Hang on, because I am supporting IE8 visitors, I want jQuery 1.10 and jQuery latest version for IE9 and up:
bower install jquery-ie=jquery#1.10 jquery=jquery --save
The above snippet is interesting, lets explain what’s going on. If you require multiple versions of the same library calling a regular Bower install twice will mean the second install directive will overwrite the first version instead of download two completely separate installations.
In Bower there is a cool feature that allows us to alias our packages with a label, we can have hundreds of the same library just by changing the label. Once again we are using the –save flag to add these packages to our bower.json so others can install them in their own local versions.
For more information about the available commands in Bower and what you can do, check out the official Bower site for more information than covered in this post.
Using Bower dependencies in your theme with a task runner
We now should see a bower_components folder has been created, inside of it you will see jQuery (if you did all of the above steps you’ll see more than one folder). You might think using these components is a simple matter of referencing them in a wp_enqueue_scripts directive and leave it at that.
But remember we said the bower_components folder doesn’t get uploaded? It’s a temporary folder for development and should be added to your .gitignore file so you don’t accidentally commit it to your Git repository.
If I didn’t cover something or you couldn’t follow along, leave a comment or drop me an email and I would be happy to help you (free of charge) to implement Bower into your front-end workflow.