Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gulp 4 task: "Did you forget to signal async completion?" #45

Closed
pablodenadai opened this issue Dec 4, 2015 · 21 comments
Closed

Gulp 4 task: "Did you forget to signal async completion?" #45

pablodenadai opened this issue Dec 4, 2015 · 21 comments

Comments

@pablodenadai
Copy link

Setup

λ gulp -v
[10:52:08] CLI version 1.0.0
[10:52:08] Local version 4.0.0-alpha.2

del v2.1.0
Windows 7

Tasks

var del = require('del');
function clean() {
    return del(['docs', 'coverage', 'build', 'release']);
}

function build() {
    return gulp.series(
        clean
    );
}

gulp.task(build);

Error

λ gulp build
[10:52:22] Using gulpfile C:\project\gulpfile.js
[10:52:22] Starting 'build'...
[10:52:22] The following tasks did not complete: build
[10:52:22] Did you forget to signal async completion?

Am I missing something?

@SamVerschueren
Copy link
Contributor

I think this is an issue with Gulp@4. del returns a promise which should be handled correctly by Gulp. Not sure if this is still the case in Gulp@4.

@TrySound
Copy link

TrySound commented Dec 4, 2015

@ghpabs Try to define clean function as task.

@pablodenadai
Copy link
Author

pablodenadai commented Dec 4, 2015

@TrySound I did. No luck.

I managed to fix it by setting up my task as per below:

gulp.task('build', gulp.series(
    clean
));

@TrySound
Copy link

TrySound commented Dec 4, 2015

@ghpabs Oh I understood. You should return result of call generated function like

function build() {
    return gulp.series(
        clean
    )();
}

@Healforgreen
Copy link

Setup:

CLI version: 0.4.0
Local version: 4.0.0-alpha.2

I'm experiencing the same problem when I define a gulp.series task with an array of sub-tasks:

gulp.task('build', gulp.series([
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
]);

I'll try wrapping all the sub-tasks into a function like @ghpabs did, but gulp.series should be able to work like this anyway.

@TrySound
Copy link

TrySound commented Jan 7, 2016

@Nocomm I'm sure that named tasks should be defined as tasks not functions. I mean if you pass strings in gulp.series you should define that tasks not only functions.

@Healforgreen
Copy link

My problem turned out to be totally unrelated to this, sorry.

However, I think this

gulp.task('build', gulp.series([
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
]));

can also include a list

gulp.task('build', gulp.series(
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
));

instead of an array. Both syntaxes work fine.

@quoniammm
Copy link

My suggestion is:

var del = require('del');
function clean(cb) {
    del(['docs', 'coverage', 'build', 'release']);
    cb();
}

gulp.task('build', gulp.series(clean));

@schnittstabil
Copy link
Collaborator

@QuoniamYIF That doesn't work, del is async, thus cb() is called to early…

See Sample gulpfile.js (v3) and Sample gulpfile.js (v4) for working examples.

Personally I use this:

// gulp v3
gulp.task('clean', del.bind(null, ['docs', 'coverage', 'build', 'release']));

// gulp v4
exports.clean = del.bind(null, ['docs', 'coverage', 'build', 'release']);

See Function.prototype.bind() - Partially applied functions (currying) for details.

@AquilaSagitta
Copy link

I did this to solve the issue. Idk why it works it just works

export const build = (done) => {
    gulp.series(clean, gulp.parallel(styles, scripts))(done);
};

@slsriehl
Copy link

slsriehl commented Jan 8, 2019

@AquilaSagitta's solution worked for me. It seems like this issue arises anytime you have a task or subtask that runs multiple functions, because JavaScript is asynchronous. So any task that calls more than one function needs to call done, which will wait for all the tasks to finish & then exit that block of the promise.

Under the hood I suspect that calling gulp returns a promise, and each task requires a promise resolve or reject because recent versions of node require explicit promise resolutions, probably to do with supporting async/await syntax. In a task that only calls one function, returning the function seems to suffice.

So in @AquilaSagitta's example, it's probably either styles or scripts in gulp.parallel that needs to call done. I THINK that every gulp method automatically returns the gulp promise on complete, but gulp.parallel might not? -- so it could be gulp.parallel throwing the promise error.

Here's where the error arose for me:

gulp.task('prod', gulp.parallel(['compile-min-css', 'concat-min-js', 'vend']));

vend threw the error, and prod also threw the error, because its return value depends on the return values of its children. Vend looked like this:

gulp.task('vend', () => {

  //bootstrap
  bootstrapSrc('css', '');
  bootstrapSrc('js', '/vendor');

  //font-awesome
  // faSrc('css');
  faSrc('fonts');

  //jquery & popper
  jsOnlyVend(`jquery`);
  jsOnlyVend(`popper.js`);
});

And the fix was to add the done parameter to vend & call it at the end.

gulp.task('vend', (done) => {

  //bootstrap
  bootstrapSrc('css', '');
  bootstrapSrc('js', '/vendor');

  //font-awesome
  // faSrc('css');
  faSrc('fonts');

  //jquery & popper
  jsOnlyVend(`jquery`);
  jsOnlyVend(`popper.js`);

  done();
});

@standiki
Copy link

standiki commented Oct 1, 2019

Was having same error but after proper reading of the above solution it worked for me, below is my code.

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

// A function to help grab the css file

gulp.task('shop', function(resolve){
gulp.src('css/shop.css')
// Pipe the content of the css file into autoprefixer
.pipe(autoprefixer())
.pipe(gulp.dest('build'))

resolve();

//Calling the function param which is "resolve" did the magic
});

@TrySound
Copy link

TrySound commented Oct 1, 2019

@agilestrings You should return stream so task could track its state. Calling resolve like you did does not actually solve the problem. Stream continue do the work.

gulp.task('shop', function(){
  return gulp.src()
})

@standiki
Copy link

standiki commented Oct 2, 2019

You're right sir @TrySound i noticed that " Autoprefixer " is not working. Help throw more light for more understanding. Thank you sir.

@standiki
Copy link

standiki commented Oct 4, 2019

Thanks @TrySound i have figure it out and everything is working fine. below is my code.

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

gulp.task('styles', function(){
return gulp.src('css/styles.css')
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest ('build'));
});

gulp.task('watch', function(){
gulp.watch('css/styles.css', gulp.series(['styles']));
});

@LukeMc92
Copy link

Hi all,
Having the same problem here could any one shed some light to help me figure this out.
when running npm run proxy i get this message.

[14:24:26] '' errored after 1.23 min
[14:24:26] Error: exited with error code: 2
at ChildProcess.onexit (C:\Users\Luke McNally\Desktop\projects\flawless-sneakers\node_modules\end-of-stream\index.js:40:36)
at ChildProcess.emit (events.js:198:13)
at ChildProcess.EventEmitter.emit (domain.js:466:23)
at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
[14:24:26] 'webpack:dev' errored after 1.23 min
[14:24:26] 'watch-proxy' errored after 1.23 min
[14:24:26] The following tasks did not complete: , browser-sync-proxy,
[14:24:26] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! adonis-fullstack-app@4.1.0 proxy: gulp watch-proxy

@LukeMc92
Copy link

and this is my code

gulp.task(
'watch-proxy',
gulp.parallel([
gulp.series([
'webpack:dev',
'styles',
function runningWatch() {
gulp.watch('./resources/scss//*', gulp.parallel('styles'));
gulp.watch('./resources/js/
/', gulp.parallel('webpack:dev'));
gulp.watch(['./public/**/
', './public/*']).on('change', reload);
},
]),
gulp.series(['browser-sync-proxy']),
]),

// This is the production build for your app
gulp.task('build', gulp.series([gulp.parallel(['styles', 'webpack:prod'])])));

@LukeMc92
Copy link

@AquilaSagitta solution work for me

@LukeMc92
Copy link

@AquilaSagitta @slsriehl solution worked for me. It seems like this issue arises anytime you have a task or subtask that runs multiple functions, because JavaScript is asynchronous. So any task that calls more than one function needs to call done, which will wait for all the tasks to finish & then exit that block of the promise.

Under the hood I suspect that calling gulp returns a promise, and each task requires a promise resolve or reject because recent versions of node require explicit promise resolutions, probably to do with supporting async/await syntax. In a task that only calls one function, returning the function seems to suffice.

So in @AquilaSagitta's example, it's probably either styles or scripts in gulp.parallel that needs to call done. I THINK that every gulp method automatically returns the gulp promise on complete, but gulp.parallel might not? -- so it could be gulp.parallel throwing the promise error.

Here's where the error arose for me:

gulp.task(
'watch-proxy',
gulp.parallel([
gulp.series([
'webpack:dev',
'styles',
function runningWatch() {
gulp.watch('./resources/scss//', gulp.parallel('styles'));
gulp.watch('./resources/js//', gulp.parallel('webpack:dev'));
gulp.watch(['./public/**/', './public/
']).on('change', reload);
},
]),
gulp.series(['browser-sync-proxy']),
]),

Webpack:dev threw the error, and watch-proxy also threw the error, because its return value depends on the return values of its children. webpack:dev looked like this:

gulp.task(
'webpack:dev', (
gulp.series(cb => {
return exec('npm run dev:webpack', function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
})
);

And the fix was to add the done parameter to a function in webpack:dev & call it at the end.

gulp.task(
'webpack:dev', (done) =>{
gulp.series(cb => {
return exec('npm run dev:webpack', function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
})
done();
});

@syed-haroon
Copy link

syed-haroon commented May 4, 2020

Imports:

const { src, dest, series, parallel } = require('gulp');
const del = require('del');

In one line:

function clean(cb) {
  del(['./dist/'], cb());
}

Or, In two lines:

function clean(cb) {
  del(['./dist/']);
  cb();
}

Finally:
exports.default = series(clean, parallel(process1, process2));

@JohnnyTMD
Copy link

JohnnyTMD commented Jul 20, 2020

This solved my issue:

 gulp.task('include', async function () {   <-- async added
    gulp.src('./../pay-dialog.js')
        .pipe(include())  <-- from gulp-include, witch is async, similar to del
        .on('error', console.log)
        .pipe(gulp.dest('../js/'));
});

gulp.task('default',
    gulp.series([
        'include',  <-- async task
        'images',
        'html',
        'clean-css',
        'pack-css-outer-style',
        'fonts',
        'clean-js',
        'pack-js-widget',
        'pack-js-intl-utils'
    ])
);


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests