Gulp: Episode 3 - Return of the Jedi

the force will be with you. always

That's a final article in the series dedicated to Gulp. In the article, we'll deal with the processing speed as well as some other specific features of Gulp.

Let's get back to the processing speed that I mentioned at the very beginning and compare how fast a task will be performed in three cases – using SASS on Ruby, we have had the article on it, Grunt, and Gulp. The task is to compile a stream of .scss files.

Below, you can check out the speed of the task performance in three cases:

1. SASS on Ruby

2. Grunt

3. Gulp

The advantage of using Gulp is evident.

Carrying out tasks one by one 

At the beginning, if you've decided to use compressed styles in your project, and not to compress them separately later, you need to make sure that the task of style compression would be performed only when SASS compilation is done. Otherwise, the previous version of styles is compressed, which is not what we need. 

By default, all tasks in Gulp are asynchronous, so for our task we need to express directly that the minimization  has to be done after SASS compilation is over. 

Code fragment:

The 'watch' task watches for changes in the files, and when there are any, it starts 'sass' and 'cssmin' in tasks. 

Note! Follow these steps to synchronize the tasks:

  1.  Return the stream ('sass' task) – in this case, we know when the task is finished.

  2. Point out explicitly that the ‘cssmin’ task depends on the 'sass' task. - 

The last topic for discussion today concerns errors that we will make anyway when writing styles. Let's assume that we've written a task for style compilation and successfully use it. 

At first sight, everything works correctly, and there's nothing to worry about. But then we make a mistake in SASS, for instance, we use a variable that wasn't previously declared, and then we get a compile time error. 

Having corrected the error and started the compiler again, and Gulp is not working, and we have to restart it – switch to the console (alt + f12), select gulp task with an up or down arrow and go on working. Such situations happen quite rarely, but they cause additional inconveniences. 

As seen on the screen, Gulp detected the error -  Unhandled ‘error’ event. For such needs, it is useful to apply the  gulp-util, plug-in, in particular, its ability to return logs.  This way, when an error is found, it will be processed with the plug-in, and we won't have to restart Gulp. 

As a result, the plug-in displays the error and Gulf keeps working.   

That's it for today. I hope that the articles will make your development process at least a little more simple and convenient.

Let’s fill the brief, shall we?