How to fix: Gulp - tasks did not complete ... you forget to signal async completion

Recently, after writing a new Gulp task and attempting to run it using the gulp command, I saw a warning message saying that gulp run is failed because tasks did not complete and you forget to signal async completion. In this tutorial, you’ll learn how to solve this problem.

Preamble

I started using Gulp recently and fell in love in it right away, even when I’m still make “baby” mistakes due to a little experience and knowing of Gulp, I plan to use Gulp more and more, since using gulp makes work easier :) I no longer need to memorize complex and long commands, and do the same actions many times, as it was before.

I wrote a Gulp task (JavaScript function), the purpose of which is to clear the Jekyll website from previously generated files and cache. The new function worked, but an error message appeared :(

What causes this error

In my case, the below warning message appeared after writing a new Gulp task and attempting to run the gulp command inside my app project in the Terminal app.

gulp mynewtask

[22:29:42] Using gulpfile ~/GitHub/my_app_dir/gulpfile.js
[22:29:42] Starting 'mynewtask'...

[22:29:46] The following tasks did not complete: mynewtask
[22:29:46] Did you forget to signal async completion?

The warning message above is self explanatory. It saying that running of the Gulp task called “mynewtask” is failed, and this is because tasks did not complete: mynewtask and you forget to signal async completion accordingly. Therefore, we just need to add a signal async completion into the “mynewtask” (in my case) task function to solve the problem.

I noticed that only one of my functions in the gulpfile.js file is causing such a problem, while other functions work without errors. The fact is that my other functions are written using the return and returning a stream. The new function, unlike the others, simply executes the code inside it and exits (i.e. returns nothing).

This is because in Gulp (starting with version 4) all tasks are automatically asynchronous. Synchronous functions are executed one after another, and each function must wait for the previous one to complete before they start themselves. Asynchronous functions, on the other hand, can running parallel. This makes processes more efficient. In order to know when a function is completed, Gulp need them to return the explicit signifiers that they are done. Adding a callback function at the end of the function will signal async completion.

Now we know what caused this error.

Further resources:

• Gulp : Async Completion - If you have questions about the Async Completion in Gulp, check out the official documentation for more information.

How to solve it

Once we know what is causing the gulp run to fail, we can use it to solve the problem. It is a really easy process. To solve this problem, we need to add a callback function to our Gulp task so the Gulp have know when the code inside our task function is done its work. Now, step by step guide.

Note! I see that readers (not only on this website) often ask questions in the comments section the answers to which are elementary and obvious to some of us but not to others. I try to write my articles in a way that is clear to beginners. Therefore, some step may seem obvious to you and does not require mention of them, but they may help beginners complete the instructions smoothly.

Open the file gulpfile.js in the code editor you prefer. I use the Atom (atom.io) app developed by GitHub.

Find the function of the task during which Gulp showed an error message. In my case, it is a function called mynewtask.

Now we will add “callback” to our function. Don’t worry it’s being done very easy. As a “callback” we will use an empty function, which we let’s call for convenience done.

Example. This is how looked like my Gulp task before adding “callback”:

function mynewtask () {

    // YOUR CODE HERE

}

And this is how it looks after adding “callback”:

function mynewtask (done) {

    // YOUR CODE HERE

    done();
}

In the example above, into function now is passed parameter done, and then in the body of the function itself added call done(); at the very end, immediately before }.

Save the changes made to the file gulpfile.js.

Verifying

Okay, we are probably solved the problem. Finally, we can try to run gulp and verify that it runs without the warning. For this, follow these steps.

Launch the Terminal app from the Utilities folder of your Applications folder, or use Spotlight to find it.

Go to the working directory (in this example the my_app_dir catalog is used) by typing the following command and press the Enter key.

cd ./my_app_dir

Important! In my case the working directory is the catalog of my app project called my_app_dir where the problem has occurred. Change the command above to suit your case.

Type the following command and press the Enter key to run gulp and verify that it runs without the warning.

Note! In the command below just the gulp is used. Change the command below to suit your case.

gulp mynewtask

[22:33:18] Using gulpfile ~/GitHub/my_app_dir/gulpfile.js
[22:33:18] Starting 'mynewtask'...
[22:33:18] Finished 'mynewtask' after 5.53 ms

No errors. It works!

Conclusion

That’s it, you’re done. Now your Gulp task should run without the tasks did not complete and you forget to signal async completion warning lines. So simple isn’t it?

If you are having trouble fixing this problem with the instructions above, but are being able to solve this problem with any another method please describe it in the comment section below. Thanks!

I hope this article has helped you learn how to fix the Gulp’s tasks did not complete and you forget to signal async completion run error. If this article has helped you then please leave a comment

Thanks for reading!