Gulp Eases Your Development Process!

Author: Vidhi Malik | Categories: Design & Ux, Online Marketing, Software, Website Design & User Experience

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:

  • Watching file changes
  • Concatenating/minifying files
  • Prefixing files for different browsers
  • Linting JavaScript
  • Compiling CSS pre-processor

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!

Uses of Gulp

Gulp can perform front-end tasks like:

  • Bundling and Minifying (CSS, JS, Images)
  • Preprocessing
  • Live-reloading with browser
  • Cache-busting
  • Moving files
  • Conditional processing
  • Map files
  • Compressing HTML files
  • Renaming Index files

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:

  • Minify JavaScript: The next thing a developer wants to fulfill is to minify the resulting combined JavaScript file. Though there are several plugins available, “gulp-uglify” is typically preferred for proceeding with the minification task.
  • Minify CSS: Gulp provides us with a different plugin to minify CSS, thus assuring that each plugin performs its particular task. “gulp-cssnano” helps Minify all of the CSS files in a project.
  • Optimize images: Gulp helps us to optimize images too! Simply use the “gulp-imagemin” to achieve this. We can Minify PNG, JPG, GIF, SVG files, etc., with the help of this plugin.

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.

  • Watching over changes
  • 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.

Cache Busting: This one is crucial. Sometimes, developers face issues while using CSS and JavaScript pages on a site – especially when modifications are done to an existing file. There is no way to notify the browser of this change unless the file name is modified by adding a query in the end. This makes the file look like a new file altogether rather than a file with modifications.

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”.

Compressing the HTML file: Gulp places everything in the Index directory. What we can do next is compress our HTML file, and it instantly moves our HTML file to the root directory. On the contrary, the CSS and JavaScript files remain in the appropriate directories. To compress the HTML file we can use NPM module “gulp-htmlmin”.

What developers prefer: Traditional techniques or a modern approach?

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:

  • Runtime vs. compile-time optimization
  • 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.

  • Extensibility and consistency
  • 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.