Building Single Page Applications (SPA) involve many tasks that developers need to take care of. Of course, they can be broken down into phases – but the entire journey, on the whole is quite handful. Some of the common aspects include:
And, these are just a few to name! There can be plenty of others that you could add to this list.
To top this, there are several tasks that you may find yourself often repeating, which besides being monotonous, can be complex too. An easy way out while tackling such tasks would be to automate the process and thereby save time and efforts, and retain the quality as well.
For all of the above (and more) we can use Build Tools (Task Runners).
Build Tools or Task Runners are programs/ applications that automate a few of our development processes by creating executable codes. They usually run on the command line – either inside an IDE or separately.
Now, imagine a scenario in which you require none of the complex task runners. And, you are able to simplify the process with fewer codes, making it more viable and simpler to use. Wouldn’t this be ideal? In this post, I am sharing with you the tips that can help you achieve this.
Gulp is a Java-based task runner that enables automating and crunching of monotonous, repetitive tasks – all in one single step. In a cutting-edge work process, there is probably a bag full of tools that we use for development and production. Some of the noteworthy tasks of Gulp include script concatenation and minification, and SASS/LESS compilation. In addition to these, automated testing, image manipulation, and sprite generation are a few of the other benefits that one can enjoy with Gulp. For the starters, Gulp has around 1438 plugins available!
Gulp can perform front-end tasks like:
Gulp uses node package manager (npm) as an online repository that has a huge library of plugins, such as gulp-jshint, gulp-concat, gulp-uglify, gulp-cssnano, gulp-sass, gulp-htmlmin, gulp-useref, etc. Each plugin performs a specific and unique task.
An insight into some of the distinct tasks that make Gulp an efficient build system have been provided below:
Bundling: Bundling (concatenating and minifying) is the first task that a developer looks at accomplishing. There are several ways to bundle your file; Gulp allows you to work with an unbundled file during the development and packages it when you release your code.
This can be broken down into the below:
Preprocessing with Gulp: To add a new task for compiling SASS/LESS files into regular CSS, use the plugin called “gulp-sass”. Install it in your project and simply provide the SASS task with source files and a destination for it to work. Simple!
Live reloading with BrowserSync: You can effectively use Gulp to do live-reloading of browsers. Gulp allows synchronizing activities over various gadgets – the built-in plugin BrowserSync helps in achieving this.
Gulp facilitates automating many tasks; this is useful and saves time as well. Gulp can watch over the changes done in the files and automatically run the tasks with the changes.
Gulp offers several handy solutions to this problem.
One of the most practical of them all is to produce a hash string for the document and append the query as the query string. This makes the file appear unique, and also the browser is instructed to download the file as if it truly is distinctive. To implement cache busting, install the “gulp-cache-bust”.
There is a host of optimizing tools and packages available. In versions of ASP.NET, optimization is done using the “System.Web.Optimization” package. This was a casual approach that developers followed previously. In Task Runners like Gulp, optimization is done at the build/compile time, whereas, in ASP.NET packages, this task is performed at runtime.
Let’s compare both the approaches to identify the one that is most suitable:
The “System.Web.Optimization’ package for bundling and minifying files uses server resources. It first combines and minifies the files in that bundle and caches the result in the subsequent request. As a developer, I would rather prefer performing this step on the developer’s machine or on the build server itself, before publishing the application. This is what Gulp follows up with.
Though MVC5 provides us with a better and ‘out-of-the-box’ experience, when it comes to taking a step further, it sticks itself to just bundling and minifying. On the contrary, Task Runners can perform various other tasks such as preprocessing, mapping files, watching over changes, and many more.
As is evident from the above, a shift in the focus from the traditional to the modern approach is inevitable. Developers have, over the course of time, explored different techniques – many of which proved beneficial. Deploying the Task Runner approach not only saves our development time, but also gives us a lot of ways to explore other productive tasks.