Bower is the most popular front-end package manager. You can
install most of the front-end libraries from Bower. However, the biggest
weakness of bower is that its functionality is just like a downloader. Each
Bower package has a different structure and it is not a very good solution for
us when we have to manually include the script files for each new library that
we install. In this post, I will demonstrate the solution for that problem. This
is not a fully automated method, only for the js part, but that still saves you
a lot of time. Also, all the solutions presented in this post are defined in Gulp.
2. Install Bower packages with Gulp
Before processing to this part, make sure that you have Bower and Gulp command
line installed already. You may need a .bowerrc file in your project root
directory (or the directory that you want bower to run from), but this is
optional. If the .bowerrc file is not presented, the default setting will be
loaded. You can read more information about Bower configuration
Now we will create a Gulp task for installing the libraries describes in
bower.json using the configuration in .bowerrc automatically.
If you are install the library for the first time, use bower command line to
write the dependencies into the bower.json file
Later, when the other developers fetch the new code to their local computers,
they can run the bower task
Actually, you can just run bower install to install all packages listed in
bower.json. However, the advantage of using Gulp is that you can chain the
tasks together, specify which task should run after finishing installing bower
3. Auto bundle Bower libraries
Each Bower library has its own bower.json file, which specifies the
dependencies of that library. We will need a Gulp task that parse these files
and add them to a new file in the right order (dependencies first and then the
library itself after). The explanation is in the next part.
It’s a bit long. Let me break down the code and explain it.
First, the exclude array is for you to specify the library name that you don’t
want to bundle into the main library file.
Next, we get the information about the dependencies (list of libraries) that our
And next, we define some variables. packagesOrder will store the right order
of the libraries (dependencies first). mainFiles will store the list of all
main files of the libraries (in the right order) to add to the bundle file
Next, iterate through all bower packages that the project needs and add it to
the packagesOrder array using the addPackage function except the ones listed
The addPackage function parses the bower.json file of the library passed
into it, get all the dependencies and repeat the add step by calling itself.
After that, iterate through the packagesOrder. For each library, read its
bower.json to get the main property. Add that main file to mainFiles if
that is a .js file
Finally, concatenate all the files in mainFiles into one file
The result when you run this task is a libs.js file in dist folder. All
you need to do is to include that libs.js in you website layout.