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.
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
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
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.
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.
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.
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.
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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post