Manage dependencies and decrease load times with Gulp tasks


In the following blob of text I will walk you through a simple Gulp setup that enables you to work fast and effective when writing AngularJS applications and managing your front end dependencies with Bower.

The objective of this post is to create a set of gulp tasks handling concatenation, minification and source map creation of you Bower dependencies as well as your AngularJS application. That said, I expect you to have a running AngularJS application with some Bower dependencies ready at hand as well as Node.js installed on your system.

I organize my files as follows and this is the reference for all the tasks below. This is, of course, easily changed to your needs as you will see.

We are going to use Gulp tasks. If you don’t know Gulp, give their website a shot and see what they got going. Basically Gulp is a task runner. This is quite useful when having tedious tasks that needs to be done like minification and concatenation. Just what we need.

Install the Gulp package with the following commands.

The -g  flag installs the package globally on the system so you can run gulp with the simple command  gulp and the --save-dev  flag adds the package to your package.json so it’s clear that the project needs this package. If you receive a EACCES error there might be a problem with your NPM permissions. In that case, see this article from the NPM docs.

Gulp looks for a specific file when locating tasks. This is the gulpfile.js . To learn more about the basics of gulp tasks go to the Gulp Documentation. Take your time.

Now that you know everything about how gulp tasks work lets look at our needs. Think of the simplest tasks possible.

  • Bundle vendor scripts from Bower dependencies
  • Bundle vendor styles from Bower dependencies
  • Bundle application scripts
  • Bundle application styles

This is the basic ones. As we move on we might merge some of these and split some of it out as well.

Let us start with the vendor bundling. This is where we want gulp to look up our Bower dependencies and find the necessary files for each package. This might sound complicated, but don’t worry. The great thing about Open Source Software is that there is a lot of software to use. We will use a node package that does exactly this. The main-bower-files package. We also want to concatenate the files and minify them. The concatenation merges all files into one. This saves HTTP transfers between the server and the client and heavily reduces load times. Minification strips white spaces and minimize variable names. This minimizes the file sizes which again reduces load times. For this we will use the node packages gulp-concat , gulp-uglify and gulp-cssnano. Before we get to it we would also like some source maps. Debugging with minified files is a pain! For this we use gulp-sourcemaps. You see? There is a package for everything. We just use each one and create a task that fits our needs.

To install all the packages at once run the following in your terminal.

On to the actual gulp task.

Each .pipe step is part of our chain. At first we get the JavaScript files from our Bower dependencies. Next we setup the source maps package to record the changes for our files. Then on to concatenation and minification. At the end we write the source files to a maps directory and the minified vendors.min.js file to a dist directory.

Did you notice the dependency to the bower-restore task? No? Well it’s there. This is a small task that downloads all the Bower dependencies before the task is run. We use the gulp-bower package to do this and the task is quite simple.

On to the our AngularJS application. Basically we want to do the same thing. This time we don’t need the main-bower-files package. Instead we just select the files with a glob.

Notice how we specify the main application file first before using the glob selector. This is to make sure the angular module definition is at the beginning of the concatenated files. After this all JavaScript files in all subdirectories are included. The rest is the same as in the vendor bundle.

Styles are needed to make beautiful web sites. There are styles in both Bower dependencies and in our site. Normally there is not a lot of CSS lines compared to JavaScript in my AngularJS applications, so I merge all of these stylesheets into a single one. The task for that is as follows.

At the second line we get the Bower stylesheets and concatenate this array with the application specific styles. The rest is the same, except we use another minification package as mentioned earlier. We use gulp-cssnano.

There we are. We now got tasks to create minified and concatenated JavaScript and CSS files. Our main index.html file can reference these and everything is nice. Oh, and the best part. You don’t need to add <script src=""></script> tags for each dependency anymore!

To run the tasks you just call each one.

Or create a task to run them.

That is it. If you want to further improve your work flow I recommend you create some tasks to watch your files and rebuild when there are changes. Combined with reload or Browsersync you got a nice flow going.

If anything is unclear or you have any questions at all, let me know!