Gulp error: The following tasks did not complete: Did you forget to signal async completion?
Asked Answered
I

21

340

I have the following gulpfile.js, which I'm executing via the command line gulp message:

var gulp = require('gulp');

gulp.task('message', function() {
  console.log("HTTP Server Started");
});

I'm getting the following error message:

[14:14:41] Using gulpfile ~\Documents\node\first\gulpfile.js
[14:14:41] Starting 'message'...
HTTP Server Started
[14:14:41] The following tasks did not complete: message
[14:14:41] Did you forget to signal async completion?

I'm using gulp 4 on a Windows 10 system. Here is the output from gulp --version:

[14:15:15] CLI version 0.4.0
[14:15:15] Local version 4.0.0-alpha.2
Iconostasis answered 27/4, 2016 at 18:20 Comment(1)
If you're here because you've got an issue with webpack-stream. Use this: github.com/shama/webpack-stream/issues/…Carew
H
628

Since your task might contain asynchronous code you have to signal gulp when your task has finished executing (= "async completion").

In Gulp 3.x you could get away without doing this. If you didn't explicitly signal async completion gulp would just assume that your task is synchronous and that it is finished as soon as your task function returns. Gulp 4.x is stricter in this regard. You have to explicitly signal task completion.

You can do that in six ways:

1. Return a Stream

This is not really an option if you're only trying to print something, but it's probably the most frequently used async completion mechanism since you're usually working with gulp streams. Here's a (rather contrived) example demonstrating it for your use case:

var print = require('gulp-print');

gulp.task('message', function() {
  return gulp.src('package.json')
    .pipe(print(function() { return 'HTTP Server Started'; }));
});

The important part here is the return statement. If you don't return the stream, gulp can't determine when the stream has finished.

2. Return a Promise

This is a much more fitting mechanism for your use case. Note that most of the time you won't have to create the Promise object yourself, it will usually be provided by a package (e.g. the frequently used del package returns a Promise).

gulp.task('message', function() { 
  return new Promise(function(resolve, reject) {
    console.log("HTTP Server Started");
    resolve();
  });
});

Using async/await syntax this can be simplified even further. All functions marked async implicitly return a Promise so the following works too (if your node.js version supports it):

gulp.task('message', async function() {
  console.log("HTTP Server Started");
});

3. Call the callback function

This is probably the easiest way for your use case: gulp automatically passes a callback function to your task as its first argument. Just call that function when you're done:

gulp.task('message', function(done) {
  console.log("HTTP Server Started");
  done();
});

4. Return a child process

This is mostly useful if you have to invoke a command line tool directly because there's no node.js wrapper available. It works for your use case but obviously I wouldn't recommend it (especially since it's not very portable):

var spawn = require('child_process').spawn;

gulp.task('message', function() {
  return spawn('echo', ['HTTP', 'Server', 'Started'], { stdio: 'inherit' });
});

5. Return a RxJS Observable.

I've never used this mechanism, but if you're using RxJS it might be useful. It's kind of overkill if you just want to print something:

var of = require('rxjs').of;

gulp.task('message', function() {
  var o = of('HTTP Server Started');
  o.subscribe(function(msg) { console.log(msg); });
  return o;
});

6. Return an EventEmitter

Like the previous one I'm including this for completeness sake, but it's not really something you're going to use unless you're already using an EventEmitter for some reason.

gulp.task('message3', function() {
  var e = new EventEmitter();
  e.on('msg', function(msg) { console.log(msg); });
  setTimeout(() => { e.emit('msg', 'HTTP Server Started'); e.emit('finish'); });
  return e;
});
Heffner answered 27/4, 2016 at 19:40 Comment(12)
I appreciated your elegant and informative answer on November the 17th. And today, on Christmas day, I'm appreciating it all over again. This is one of the cases when I wish I could award +2... I can't believe that goolearching doesn't poops out this link as top #1 when looking for "The following tasks did not complete" or "Did you forget to signal async completion?"...Fritillary
"the frequently used del package returns a Promise". I'm using del, how do I write my gulp code to take advantage of the promise though? (PS. Absolutely amazing answer! +1)Holcomb
@DanielTonon Just return the Promise from your task. See this answer.Heffner
gist.github.com/demisx/… I've seen a few example Gulp 4 examples such as this one where watchers don't seem to be accompanied by completion signals. What is signaling async completion here? Is there something unique about gulp.watch() or should he be using one of the methods you listed?Appointive
@KonradViltersten it's #1 in a Google search now! Thanks for the answer sven!Vanessa
Adding another related to Gulp 4, for those who come by: https://mcmap.net/q/100375/-gulp-4-gulpfile-js-set-upLiebowitz
Could you take a look at this question #53361291 ?Advertent
Ad 3. Call the callback function: when you have to wait for a pipe to finish, the correct way to write this would be .pipe(...).on('finish', done) (or 'end' depending on your pipe)Sellers
I'm pull my hair out with this as even "returning a stream" isn't working.Mutiny
The async function() is the quickest, simplest solution.. Well done +1 !Meadowlark
Thanks man ! That single return was solving my issues, which I had looked for quite a while when reusing old gulp3 code and update to gulp 4Metz
Where to write this piece of code?Metts
I
39

You need to do one thing:

  • Add async before function.
const gulp = require('gulp');

gulp.task('message', async function() {
    console.log("Gulp is running...");
});
It answered 24/6, 2020 at 9:6 Comment(0)
M
30

THIS WORKED!

The latest update on Feb 18, 2021, I found the problem after using the elder solution below, then I have fixed it by using the following instead for the next gulp version.

File: Package.json

...,
"devDependencies": {
        "del": "^6.0.0",
        "gulp": "^4.0.2",
      },
...

File: gulpfile.js Example

const {task} = require('gulp');
const del = require('del');

async function clean() {
    console.log('processing ... clean');

    return del([__dirname + '/dist']);
}

task(clean)
...

Elder Version

gulp.task('script', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('css', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('default', gulp.parallel(
        'script',
        'css'
  )
);
Mycobacterium answered 7/2, 2019 at 10:58 Comment(3)
After upgrading an older project to Gulp 4.x this is what resolved my issue. Thanks!Displayed
@Anton, I have updated the above after found a new problem and I have fixed it recently on Feb 18, 2021.Mycobacterium
Great, this answer saved my time a lot !!! Thank you @KhachornchitSongsaen this should be accepted answer!Orthopteran
S
12

I was getting this same error trying to run a very simple SASS/CSS build.

My solution (which may solve this same or similar errors) was simply to add done as a parameter in the default task function, and to call it at the end of the default task:

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function (f) {
            return f.base;
        }))
});

gulp.task('clean', function() {
})

gulp.task('watch', function() {
    gulp.watch('*.scss', ['sass']);
})


gulp.task('default', function(done) { // <--- Insert `done` as a parameter here...
    gulp.series('clean','sass', 'watch')
    done(); // <--- ...and call it here.
})

Hope this helps!

Self answered 8/2, 2019 at 15:0 Comment(2)
Nice to see an example with actual task contentsKenyakenyatta
This doesn't look like it would wait for the series of tasks to finish, if you're calling done() immediately after gulp.series(). Maybe the process waits before exiting, but it seems this wouldn't work well if you try to compose it into a larger structure of tasks.Fugger
P
12

This is an issue when migrating from gulp version 3 to 4, Simply you can add a parameter done to the call back function , see example,

   const gulp = require("gulp")

    gulp.task("message", function(done) {
      console.log("Gulp is running...")
      done()
    });
Peekaboo answered 17/1, 2020 at 13:18 Comment(0)
L
8

Workaround: We need to call the callback functions (Task and Anonymous):

function electronTask(callbackA)
{
    return gulp.series(myFirstTask, mySeccondTask, (callbackB) =>
    {
        callbackA();
        callbackB();
    })();    
}
Lorie answered 10/7, 2017 at 1:21 Comment(0)
I
8

I cannot claim to be very knowledgeable on this but I had the same problem and have resolved it.

There is a 7th way to resolve this, by using an async function.

Write your function but add the prefix async.

By doing this Gulp wraps the function in a promise, and the task will run without errors.

Example:

async function() {
  // do something
};

Resources:

  1. Last section on the Gulp page Async Completion: Using async/await.

  2. Mozilla async functions docs.

Isla answered 26/3, 2019 at 13:54 Comment(0)
S
8

You need to do two things:

  1. Add async before function.
  2. Start your function with return.

    var gulp = require('gulp');
    
    gulp.task('message', async function() {
        return console.log("HTTP Server Started");
    });
    
Shorts answered 29/6, 2019 at 12:18 Comment(0)
C
5

Basically v3.X was simpler but v4.x is strict in these means of synchronous & asynchronous tasks.

The async/await is pretty simple & helpful way to understand the workflow & issue.

Use this simple approach

const gulp = require('gulp')

gulp.task('message',async function(){
return console.log('Gulp is running...')
})
Circuitry answered 21/12, 2019 at 3:59 Comment(0)
I
4

Here you go: No synchronous tasks.

No synchronous tasks

Synchronous tasks are no longer supported. They often led to subtle mistakes that were hard to debug, like forgetting to return your streams from a task.

When you see the Did you forget to signal async completion? warning, none of the techniques mentioned above were used. You'll need to use the error-first callback or return a stream, promise, event emitter, child process, or observable to resolve the issue.

Using async/await

When not using any of the previous options, you can define your task as an async function, which wraps your task in a promise. This allows you to work with promises synchronously using await and use other synchronous code.

const fs = require('fs');

async function asyncAwaitTask() {
  const { version } = fs.readFileSync('package.json');
  console.log(version);
  await Promise.resolve('some result');
}

exports.default = asyncAwaitTask;
Insightful answered 26/6, 2019 at 9:36 Comment(0)
C
3

My solution: put everything with async and await gulp.

async function min_css() {
    return await gulp
        .src(cssFiles, { base: "." })
        .pipe(concat(cssOutput))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
}

async function min_js() {
    return await gulp
        .src(jsFiles, { base: "." })
        .pipe(concat(jsOutput))
        .pipe(uglify())
        .pipe(gulp.dest("."));  
}

const min = async () => await gulp.series(min_css, min_js);

exports.min = min;

Cribbing answered 26/3, 2020 at 18:26 Comment(1)
I don't think .pipe is awaitable.Modernize
B
3

I got that solved, It's Pretty simple just add the below code snippet.

var gulp = require('gulp');

gulp.task('message', async function() {
  console.log("HTTP Server Started");
});
Buttocks answered 28/5, 2022 at 16:23 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.Schnell
W
2

Solution is simple, but I outline the changes I made, the error I was getting, my gulpfile before and after, and the package versions--therefore making it appear very long.

I solved this by following the directions of multiple previous answers, in addition to following the error outputted when I would save my .scss file.

In short:

  • I changed how gulp-sass was imported—see (A)

  • I changed all functions to ASYNC functions—see (B)

(A) Changes made to gulp-sass import:

  • Before: var sass = require('gulp-sass)
  • After: var sass = require('gulp-sass')(require('sass'));

(B) Simply convert functions to ASYNC—

What my gulpfile looked like before:

'use strict';
 
// dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
 
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
 
function compile_scss() {
    return gulp.src(SCSS_SRC)
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
}
 
 
function watch_scss() {
    gulp.watch(SCSS_SRC, compile_scss);
}

gulp.task('default', watch_scss); //Run tasks
 
exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;

What my gulpfile looked like after:

'use strict';
 
// dependencies
var gulp = require('gulp');
//var sass = require('gulp-sass');
var sass = require('gulp-sass')(require('sass'));
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
 
async function compile_scss() {
    return gulp.src(SCSS_SRC)
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
}
 
async function watch_scss() {
    gulp.watch(SCSS_SRC, compile_scss);
}
 
gulp.task('default', watch_scss); // Run tasks
 
exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;

Package Versions:

"gulp": "^4.0.2",
"gulp-changed": "^4.0.3",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-sass": "^5.0.0",
"sass": "^1.38.0"

Error I was getting:

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[14:00:37] The following tasks did not complete: default, compile_scss
[14:00:37] Did you forget to signal async completion?
Watkin answered 20/8, 2021 at 18:21 Comment(0)
H
2

So I got the same error with Gulp 4, but the solution was different. I had the error: "Did you forget to signal async completion?" but before the error it also says: "gulp-sass no longer has a default Sass compiler; please set one yourself" I completely missed that part at first. So I had this in the gulfile.js:

const sass = require('gulp-sass')

This should be changed to:

const sass = require('gulp-sass')(require('sass'));

Now it works.

Holohedral answered 3/2, 2023 at 23:0 Comment(0)
P
1

I was struggling with this recently, and found the right way to create a default task that runs sass then sass:watch was:

gulp.task('default', gulp.series('sass', 'sass:watch'));
Percyperdido answered 24/12, 2019 at 0:24 Comment(0)
A
1

In gulp version 4 and over, it is required that all gulp tasks tell Gulp where the task will end. We do this by calling a function that is passed as the first argument in our task function

var gulp = require('gulp');
gulp.task('first_task', function(callback) {
  console.log('My First Task');
  callback();
})
Amethist answered 9/12, 2021 at 11:59 Comment(1)
this worked for me. and also adding 'async' before 'function'Ursala
C
0

Add done as a parameter in default function. That will do.

Cotoneaster answered 26/4, 2019 at 6:36 Comment(0)
L
0

For those who are trying to use gulp for swagger local deployment, following code will help

var gulp = require("gulp");
var yaml = require("js-yaml");
var path = require("path");
var fs = require("fs");

//Converts yaml to json
gulp.task("swagger", done => {
    var doc = yaml.safeLoad(fs.readFileSync(path.join(__dirname,"api/swagger/swagger.yaml")));
    fs.writeFileSync(
        path.join(__dirname,"../yourjsonfile.json"),
        JSON.stringify(doc, null, " ")
        );
    done();
});

//Watches for changes    
gulp.task('watch', function() {
  gulp.watch('api/swagger/swagger.yaml', gulp.series('swagger'));  
});
Lyrate answered 19/6, 2019 at 8:34 Comment(0)
W
0

For me the issue was different: Angular-cli was not installed (I installed a new Node version using NVM and simply forgot to reinstall angular cli)

You can check running "ng version".

If you don't have it just run "npm install -g @angular/cli"

Witha answered 17/6, 2020 at 16:32 Comment(0)
A
0

I know the problem was presented 6 years ago but probabily you missed return in your function. I fixed this issue this morning with eslint, that gave me the same message after running "gulp lint" in my working directory.

Example:

function runLinter(callback)
{
  return src(['**/*.js', '!node_modules/**'])
    .pipe(eslint())
    .on('end', ()=>
    {
        callback();
    });
}

exports.lint = runLinter;
Alum answered 20/11, 2022 at 10:12 Comment(0)
T
0

Just add gulp before the function in your gulp.js file. hope this could solve You can see the section async/await in gulp documentation -> https://gulpjs.com/docs/en/getting-started/async-completion/

Tamatamable answered 27/7, 2023 at 9:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.