# 1. Bower

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 here.

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 packages.

# 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.

## Explanation

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 project needs

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 in exclude.

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.