Bower is really great for teams because it basically self-documents your frontend dependencies. To that end, it's really easy to update them as your project changes. It's great for your project's build process both locally and on the server. You can also use Bower to pull in your own private repositories as well for reuse across projects.
In the previous post, I covered what Bower is and some of its features. In this post I'm going to talk about the benefits of using Bower and how it can improve your WordPress development.
It's Self-Documenting
As I previously mentioned, bower is really great for teams because it self-documents your front end dependencies. If you have read my previous post on Grunt, it's almost exactly like that. When you install a package via Bower you type in bower install package-name, all you need to do is add the following at the end --save. This will add that package to the list of dependencies in your project's bower.json file.
Let's say you want to include Bootstrap in your WordPress theme and you want to use the .scss files during your build process. You will want to use the bootstrap-sass-official project and install it via Bower.
Here's how you would do it,
- Open up your command line tool of choice
- Navigate to your project's root folder
- Type in
bower install bootstrap-sass-official --saveand hit "Return" (or "Enter")
If everything is installed correctly, you should see two things, a new bower_components folder and boostrap-sass-official added in your bower.json file.
You will want to do this for each package you want to use with your project. Once you do done, any other co-worker or teammate will be able to easily install all the necessary packages for the project. All they need to do is type in bower install and all of the packages will be downloaded and installed for the project.
Of course, this technique is not only limited to frontend frameworks such as Bootstrap. There is an entire searchable repository of packages that are available to include. This can make managing your WordPress project's dependencies that much easier.
Updating Dependencies
Then again, it's not at all uncommon for packages to update often, is it? This is another place in which Bower becomes useful.
Now that you have all of your project's dependencies documented and installed, it's really easy to update those packages when updates are available. All you need to do is type in bower update and Bower will read through all of your dependencies in your bower.json file and go see if there are any updates to pull down.
The way that Bower knows if there are any updates available is by looking at the tagged version in your bower.json file and checking the latest tag on the project's GitHub repository. You can view those tagged versions by looking at the releases page, like Boostrap Sass releases.
To understand more about the significance of the tagged versions, you should check out semantic versioning. This is what most Bower registered projects use for their releases, so it's handy to understand what the numbers mean.
Build Process
The packages that are installed via Bower are only needed for build or compile time, you don't need to add to your repository. The bower_components folder is pretty much a temporary folder, so I would also suggest adding it to your .gitignore file as well in your project's git repository so you don't add them.
If you have a build server or have continuous integration set up for your project, you will want to make sure you run a bower install at the beginning of your build. Once all of your other tasks are ran, you could empty out the bower_components folder or make sure to run a bower update on each subsequent build.
If you are using Grunt for your build tasks, there is a grunt plugin called grunt-bower-task that can run a bower install for you.
Private Repositories
You can also use Bower to pull in your own private repositories, as well. This can be great for reuse of code across projects. Let's say you have a boilerplate or custom framework you use for each project. You could save it as it's own GitHub repository, then pull it into your other projects using Bower.
You will need to make sure to register it on the public Bower Registry in order to pull it down. Don't worry though, if someone doesn't have access to it, they won't be able to pull it down.
Conclusion
In this post, I talked about ways that Bower can help your WordPress development. I focused on documenting and updating your project's dependencies. I also touched on using Bower as part of your build process and using your own private repositories as well.
In the next post, I will walk through how to setup Bower in your next or existing project. I will also share some advanced ways to use it within your project.
Comments