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:
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.
- A configuration based task runner based on node.js
- Tasks live in Gruntfile.js
- Tasks are based on Grunt plugins(gruntjs/plugins)
- Code over configuration syntax
- Tasks live in gulpfile.js
- Ability to use Gulp plugins and some Node.js packages.
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?
With that said, there are two main differences between Grunt and Gulp.
- 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 Grunt.js
- Getting started with Grunt and Sass
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.