Automation Using Bower and Gulp

In today’s world if you are repeating yourself many times a day trying to build your software application, I have some great news for you.  Automation exists and it is awesome.  At Thinkovator we are using Bower and Gulp to automate our tasks for injecting, bundling, compiling, and building our AngularJS applications.


Bower is something we have just introduced into our development life cycle.  The primarily reason was really that we didnt know how useful it would be.  Boy were we wrong.  Bower allows you to install your UI packages via a bower.json file.  Why is that important you may be wondering?  Well, this means we no longer need to check all the dependencies to our repositories, it also means upgrades and deployments of our UI components are done in a package delivery system instead of developers having to hunt websites for the correct version.  So we can grab ngRouter, ngAnimate, Moment.js and have Bower install these components for us.  Once installed we will be able to ask Bower if any of these have updates and update them accordingly.


Gulp has been around a while now and it is starting to becoming our favorite Javascript task runner.  Gulp is a great tool for creating tasks that you may be doing repeatedly already.  Some quick examples would be compiling LESS or SCSS files to make the CSS file, minifing and bundling the CSS and JS files or maybe having to clean up directories after each build to make sure the latest and greatest code is actually what is out there.  We have listed some Gulp packages we find handy below and we hope they help you find some new tools for automating your builds.
Gulp task we have found useful:
  •  “del”: Delets files
  • “gulp-angular-templatecache”: Used in creating Angularjs TemplateCache files
  • “gulp-autoprefixer”: Helps with CSS compatitiblity
  • “gulp-bump”: Bumps the version of your packages.json/bower.json versions
  • “gulp-csso”: CSS minifier
  • “gulp-filter”: Allows for creating filters on how files are being selected
  • “gulp-if”: Allows for conditional logic in the Gulp tasks
  • “gulp-imagemin”:  Image minifier
  • “gulp-inject”: Allows injecting Javascript and CSS paths into html pages
  • “gulp-jscs”: Checks Javascript code styles
  • “gulp-jshint”: Checks Javascript syntax
  • “gulp-less”: Compiles less files
  • “gulp-load-plugins”: Used for lazy loading of gulp packages in the gulpfile.js
  • “gulp-minify-html”: Html minifier
  • “gulp-ng-annotate”: Allows Angularjs Dependency injection to work when minified
  • “gulp-rev”: Used to revision Javascript and CSS files
  • “gulp-rev-replace”: Paired with gulp-reve
  • “gulp-uglify”: Javascript minifier
  • “wiredep”: Wire up dependencies and inject them into an html file
  • “yargs”: Allows access to the cmd line arguments passed into Gulp

Leave a Reply

Your email address will not be published. Required fields are marked *