DEVELOPERS BLOG

Smarter Development with Build Systems

gulp

Today I want to talk about using build systems in your development workflow and how I make use of Gulp in the new Cordova Kitchen Sink app.

Gulp is a JavaScript task runner used to automate and enhance your development workflow. It allows you to work smarter and faster. There are numerous plugins available, which allow you to run tasks of all types.

I use Gulp in the Kitchen Sink sample for running a few tasks that are important to me and to my own workflow. Here are some of my tasks.

Code Linting

Linting is the process of running a task that will analyze your code for errors.
code1

Compression & Obfuscation

It is considered best practice to minify your code before releasing a production version. While some people do not see a need to minify, it is generally agreed upon that this will make your code as tiny as possible, using less memory and thus executing faster.

It is also incredibly important to protect your code as much as possible. By running the “uglify” task, my code is obfuscated and the JavaScript is hard to decipher by others if they were to sneak a peek at it.

code2

File Syncing

code3

In the Kitchen Sink app, code is separated from the views. This keeps it very organized and easy to develop. Nobody likes a messy project! To keep my workflow nice and tidy, I have a “static/” folder where I keep things like assets and other files that generally never change, or, are rarely touched.

I do not want to manually copy my assets into the production folder, where all the “processed” code resides, each time I generate a build to test so I let Gulp handle it.

Running Gulp

When I am ready to build my project, running Gulp is just a matter of simply typing… “gulp”. Since it is installed globally by default, it will detect the gulpfile.js file in my root folder, execute and then output the following:

code4

As you can see, I’m able to accomplish a lot of work with only a few simple tasks and don’t forget this is just the tip of the iceberg. How Gulp or other build systems can help will depend on your own specifics needs.

Perhaps you want a task named ‘do-it-all’ which lints your code, minifies it, runs unit tests and finally builds a release. You can do that. Maybe you just want to run one task to sync some files between a couple of folders. You can do that too!

I highly recommend you head over to the Gulp website and learn more about how you can develop smarter with a build system.

Do you use Gulp or another build system for your workflow? Get in touch with me on Twitter (@chadtatro) and let me know how you find it useful!

Chad Tetreault

About Chad Tetreault

A developer at heart, I’ve been coding in some shape or form since the age of 13. Nowadays I focus on building awesome cross-platform (Android, iOS, BlackBerry) mobile web applications powered by Cordova, JavaScript, and AngularJS.