Share and Enjoy !

In this post, I’m continuing to discuss my recent experience using Gulp to create builds for an Angular app.  Largely, the power of Gulp comes via the many plugins that are available.  For my most recent Angular project, I needed to perform optimizations for CSS/Javascript and arrived at what I think are must have plugins for any Angular project.

CSS optimizations

Initially, my project contained numerous CSS files, each containing a large volume of redundant and unused rules.  I used the plugins below to perform a one-time cleanup of these CSS files, reducing 22,000 lines of css rules down to 2,500 lines!

  • gulp-concat: Combine all of the CSS files into a single file.
  • gulp-purifycss: Remove unused css rules.
    • This plugin also normalized some of my nonstandard css rules which the next plugin, gulp-csso, was unable to read.
  • gulp-csso: Restructure css into a single line, merge rules.
  • gulp-css-purge: Purge duplicate css rules.
  • gulp-out: Output the combined, purified, purged css rules into a single file.

You may notice that gulp-csso appears to be redundant with gulp-purifycss and gulp-css-purge.  For this one-time optimization, I found that each of these plugins served a purpose and each of these performed optimizations which the other missed.

After the one-time tasks above completed, I performed the following:

  • Reformatted the resulting css, presently all on one line, into a human readable form and checked this into source control, serving as the developer maintained source.
  • Added gulp-csso as a task to be performed with each release build.

The one-time optimizations above resulted in a much lower volume of css for developers to maintain, and the gulp-csso task became part of the standard build, resulting in the leanest css for production deployments.

Javascript Optimizations

My Angular project contained around 50 javascript references and used 30 Angular templates.  This resulted in a large volume of script and markup for the app to load, and the number of templates and javascript files resulted in a very “chatty” load (i.e.  a high volume of HTTP GETs).

To begin, I used gulp-angular-templatecache to move all of the Angular templates into a single javascript file.  Most Angular developers are familiar with Angular templates as html files, and this is the most convenient way of working with templates as a developer, but Angular also allows for templates to be loaded and cached from javascript.  Given a set of html Angular templates, gulp-angular-templatecache will produce a javascript file which can be referenced, loading all of your Angular templates into the Angular template cache at once.

Next, I used gulp-useref to combine javascript files together.  It’s hard to pick a favorite, but gulp-useref is high on the list.  This clever utility uses comments in your html to determine the set of javascript files to combine together and the destination file.  The example below instructs gulp-useref to combine service1.js, service2.js, and service3.js into combined.js, and it modifies the html to now reference combined.js.  I used gulp-useref to combine together all of my Angular code (controllers, directives, services, etc..) and numerous third part libraries such as jQuery, Angular, Moment, and others. This is highly useful, pure genius!

    <!-- build:js assets/scripts/combined.js -->

    <script type="text/javascript" src="app/shared/services/service1.js"></script>

    <script type="text/javascript" src="app/shared/services/service2.js"></script>

    <script type="text/javascript" src="app/shared/services/service3.js"></script>

    <!-- endbuild -->

After combining almost all of the javascript, including third party libraries, and Angular templates into a single javascript file, I used gulp-uglify to minify and compress the resulting javascript.  gulp-uglify “compresses” javascript by shortening the names of javascript variables, removing linefeeds, and performing code optimizations, resulting in a smaller volume of script.

Wrap-up

The registry at http://gulpjs.com/plugins/ includes over 2,300 plugins!  Searching for those which perform css and javsascript optimizations results in dozens of potentially useful plugins to sift through; some work well with Angular apps and some don’t.  Hopefully you can take a short-cut by starting with the plugins referenced above.  Perhaps you’re using other plugins for your Angular apps or need more detail for how I used plugins in my app?  Let’s discuss in the comments section below.

Share and Enjoy !

Related Content: