What are build tools and why use them?

Build automation is the act of scripting or automating a wide variety of tasks that software developers do in their day to day activities such as:

compiling program source code into binary code
packaging a compiled program for distribution
running automated tests
deploying to production systems
generating documentation and/or release notes.

As a software developer, there are dozens of common tasks that need to be repeatedly completed within a project, for example:

Concatenating and minifying scripts
Preprocessing CSS
Optimizing images
Running tests
Invalidating caches
Moving files around

All of these actions can become tedious if done by hand repeatedly. With a build tool, you can spend a small amount of time automating these sort of tasks. This will help you to focus on the development of your website or app going forward.

For information on other use cases for build tools, you can view the reference here.

Types of build tools

There are many different types of build tools, To keep things simple, we’ll focus on Grunt and Gulp in this article. But here are a few examples of other build tools you could use:

Broccoli- http://broccolijs.com/
Brunch- http://brunch.io/
npm scripts
Make

Each of these has its own unique benefits and syntax but ultimately they can be used to achieve the same goal of automating a repetitive front end task.

With so many tools to select from, how do you know which one to select?

Here are a few things to look for when selecting a build tool.

Speed. Ideally, you want your build tool to be fast in execution as there’s much need for speed when iterating on a website or app. Also, when changing a line of code, you want to reload the page to see the changes instantly. Disrupting that process could slow down productivity.

Community driven. The tool you select should have a healthy community of developers that exchange plugins and are continually adding functionality to support it.

Modular and flexible. Even the most advanced tool has its limits. Tools that are extensible allow you to add your own custom functionality giving you the flexiblity to adjust as you see fit.

Both Grunt and Gulp are fast, backed by strong communities of enthusiasts, modular, and flexible.

Grunt

A configuration based task runner based on node.js
Tasks live in Gruntfile.js
Tasks are based on Grunt plugins(gruntjs/plugins)

Gulp

Code over configuration syntax
Tasks live in gulpfile.js
Ability to use Gulp plugins and some Node.js packages.

Both tools are task runners that use Node.js, which is an open-source Javascript runtime environment used to develop tools and applications. Grunt and Gulp both also use plugins to accomplish whatever tasks you need them to automate for you.

Grunt and Gulp also use the extension .js files to build tasks. For Grunt, you use a Gruntfile.js and for Gulp, you use Gulpfile.js. You can also define flows with grunt.task and gulp.task instead of using functions.

How do Grunt and Gulp differ?

Grunt fulfills many of the requirements above. It has a strong community and a healthy plugin ecosystem. On the other hand, Gulp is built for speed and can execute tasks in parallel. Additionally, Gulp uses code over configuration. This means you can write Javascript to extend or modify tasks that don’t work for you. This is also true for Grunt, but Gulp makes it a bit easier.

With that said, there are two main differences between Grunt and Gulp.

Grunt uses declarative configuration schema, while Gulp allows you to code your build scripts using JavaScript.

Grunt was created around a set of built-in, and commonly used tasks, while Gulp is flexible(sound familiar?) and enforces nothing except how the community developed micro-tasks should interact with each other. It’s important to note you can create plugins with Grunt as well. But here’s how the two differ.

Grunt uses plugins that often accomplish multiple tasks at the same time. This means that the plugin creation process is very different depending on which tool you’re using. Grunt currently has 6,283 community plugins.

Gulp has been designed to use a series of plugins that each do a task. Each plugin for Gulp is written with the goal of doing one thing very well. As of today(October 2017) the Gulp plugin registry contains 3,328 different plugins for unique purposes.

Getting started with Grunt

Here are a few guides and tutorials that will help you get started with Grunt:

Getting started with Gulp

After you’ve installed your build tools, now you can include DeployBot in your workflow. The next article discusses setting up and using build tools in DeployBot.