Application Development: HTML5 build tools

Nowadays, HTML5 applications are complicated enough to treat them like something more than a set of static and dynamic pages. Web Application Development of client side solutions is a full process like any other software development. So, it needs some kind of build tool to process LESS or SASS sources of stylesheets, translate CoffeeScript, TypeScript or any other language that compiles into JavaScript, apply linters and run unit tests, join and minify the code. Automation of all these duties is a must-have practice of any professional team like Iflexion. There are already several approaches available and widely used.


Grunt [http://gruntjs.com] was the first in a row of JavaScript build tools. It’s based on the set of tasks. Basically, grunt is a task runner. The tasks should be described in Gruntfile.js file as declarative configuration composed in JSON format. There are a lot of plugins to automate almost any set of actions. Grunt is based on node.js. Main module and its plugins are npm packages.


Gulp [http://gulpjs.com] was created as alternative to grunt, but it’s based on the code instead of declarative configuration. It’s also based on node.js. Configuration consists of tasks, but uses a streams concept to define an exact workflow for a specific build step. The content of source file is processed by a sequence of transformations. That means gulp is faster and simpler. On the other hand, you should be familiar with node.js coding to use gulp. There are a lot of plugins. Most of the new projects use gulp as build tool for their HTML5 Application Development.


Brunch [http://brunch.io] is a modern HTML5 build tool. It was created as an alternative to existing grunt and gulp solutions and positioned as even better tool. Configuration code is much less. It looks like almost all unnecessary pure syntax and infrastructure lines was just dropped. The principal difference is design. Grunt is a set of tasks to be runned one after another. That’s a problem, because such scheme is not flexible. Brunch is stream based technology like gulp. So, it doesn’t create temporary files. Command line tool of brunch is also much simpler. There are only 3 commands: new to bootstrap a new project based on one of the templates available as github repos, build to run building process and watch to force watching mode.


All build engines were designed to automate the same set of routines. One of them is watching. The idea is automatically re-build a solution on any source file changing. Modern IDE like WebStorm support such feature out of the box. But if you use simple editor for App or Website Development, you can run build tool via command line interface with special flag (usually, –watch), to keep an eye on the file structure of the project. Building process will be runned automatically all the time you save your code in the editor. That means build version of the application is always actual and ready for testing. You just need to switch to the browser window.

Read also

Comments are closed.