gulp4: Did you forget to signal async completion? - asynchronous

Question

Having some issue with migrating from gulp3 to 4. I have seen various posts but still cannot seem to get around the error
[12:17:41] The following tasks did not complete: serve-build, build,
[12:17:41] Did you forget to signal async completion?
Already tried adding the async function() and promise/return in function(done){.... done();}
cannot seem to get in the right place. It seems to stop and build my lib and app .js files but they are missing things.. specifically the tinymce plugin..
gulp.task('clean-styles', function(done) {
var files = [].concat(
config.temp + '**/*.css',
config.build + 'styles/**/*.css'
);
clean(files, done);
});
gulp.task('styles', gulp.series('clean-styles', function() {
log('Compiling Less --> CSS');
return gulp
.src(config.less)
.pipe($.plumber()) // exit gracefully if something fails after this
.pipe($.less())
// .on('error', errorLogger) // more verbose and dupe output.
requires emit.
.pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
.pipe(gulp.dest(config.temp));
}));
/**
* Remove all fonts from the build folder
* #param {Function} done - callback when complete
*/
gulp.task('clean-fonts', function(done) {
clean(config.build + 'fonts/**/*.*', done);
});
/**
* Copy TinyMCE fonts
* #return {Stream}
*/
gulp.task('fonts-tinymce', function () {
log('Copying tinymce fonts');
return gulp
.src(config.fontsTinyMCE)
.pipe(gulp.dest(config.build + 'styles/fonts'));
});
/**
* Copy fonts
* #return {Stream}
*/
gulp.task('fonts', gulp.series('clean-fonts', 'fonts-bootstrap', 'fonts-tinymce', function () {
log('Copying fonts');
return gulp
.src(config.fonts)
.pipe(gulp.dest(config.build + 'fonts'));
}));
/**
* Remove all images from the build folder
* #param {Function} done - callback when complete
*/
gulp.task('clean-images', function(done) {
clean(config.build + 'images/**/*.*', done);
});
/**
* Compress images
* #return {Stream}
*/
gulp.task('images', gulp.series('clean-images', function() {
log('Compressing and copying images');
return gulp
.src(config.images)
.pipe($.imagemin({optimizationLevel: 4}))
.pipe(gulp.dest(config.build + 'images'));
}));
gulp.task('less-watcher', function() {
gulp.watch([ config.less ], gulp.series('styles'));
});
/**
* Optimize all files, move to a build folder,
* and inject them into the new index.html
* #return {Stream}
*/
gulp.task('optimize', gulp.series('inject', 'test', function() {
log('Optimizing the js, css, and html');
var assets = $.useref.assets({searchPath: './'});
// Filters are named for the gulp-useref path
var cssFilter = $.filter('**/*.css');
var jsAppFilter = $.filter('**/' + config.optimized.app);
var jslibFilter = $.filter('**/' + config.optimized.lib);
var templateCache = config.temp + config.templateCache.file;
return gulp
.src(config.index)
.pipe($.plumber())
.pipe(inject(templateCache, 'templates'))
.pipe(assets) // Gather all assets from the html with useref
// Get the css
.pipe(cssFilter)
.pipe($.minifyCss())
.pipe(cssFilter.restore())
// Get the custom javascript
.pipe(jsAppFilter)
.pipe($.ngAnnotate({add: true}))
.pipe($.uglify())
.pipe(getHeader())
.pipe(jsAppFilter.restore())
// Get the vendor javascript
.pipe(jslibFilter)
.pipe($.uglify()) // another option is to override wiredep to use min files
.pipe(jslibFilter.restore())
// Take inventory of the file names for future rev numbers
.pipe($.rev())
// Apply the concat and file replacement with useref
.pipe(assets.restore())
.pipe($.useref())
// Replace the file names in the html with rev numbers
.pipe($.revReplace())
.pipe(gulp.dest(config.build));
}));
/**
* Build everything
* This is separate so we can run tests on
* optimize before handling image or fonts
*/
gulp.task('build', gulp.series('optimize', 'images', 'fonts', function() {
log('Building everything');
var msg = {
title: 'gulp build',
subtitle: 'Deployed to the build folder',
message: 'Running `gulp serve-build`'
};
del(config.temp);
log(msg);
notify(msg);
}));
/**
* Remove all tinymce fonts from the build folder
* #param {Function} done - callback when complete
*/
gulp.task('clean-fonts-tinymce', function (done) {
clean(config.build + 'styles/fonts/*.*', done);
});
/**
* serve the build environment
* --debug-brk or --debug
* --nosync
*/
gulp.task('serve-build', gulp.series('build', function() {
serve(false /*isDev*/);
}));

Answer 1

I have a somewhat similar setup and this should help with the error:
/**
* serve the build environment
* --debug-brk or --debug
* --nosync
*/
gulp.task('serve-build', gulp.series('build', function(done) {
serve(false /*isDev*/);
done();
}));
More on async completion can be found in the documentation

Answer 2

With normal gulp tasks (e.g. build my javascript) you have a well defined start and end to that task.
However with dev tasks like devServer or watch tasks these are started and then running perpetually. The reason for the error is generally that you started the task and it was still running when you hit CTRL-C and so gulp does not see the task as finished (because it wasn't).
The other case where you get this error is if your code DID finish but was async and you forgot to tell gulp you were done by using a callback. But I'm going to ignore that case here.
If you don't want an error from your never-ending tasks (devServer/watch/runRedis/etc) when you CTRL-C gulp, you have 2 choices for these type of tasks...
1) Lie to gulp
function myNeverEndingDevTask(done) {
// start an async process (dev server, watch, etc)
done(); // we tell gulp we are done, but we aren't really (async process keeps going)
}
In this scenario gulp will report Finished: myNeverEndingDevTask right away even though the task is not finished (e.g. devServer or watch still running). But you won't get the error when you CTRL-C gulp.
2) Handle CTRL-C
I'll use gulp.watch as an example but it can apply to any neverending gulp tasks.
The issue is that watch is still running when we hit CTRL-C and gulp knows it is still running because we didn't do option #1 above.
So we need to handle the CTRL-C and tell gulp we are done. We can do this by adding a SIGINT event handler that cleans up (if needed) our never-ending task and THEN calls done() to let gulp know we finished the task.
You can wrap this into a utility function for instance...
function gulpWatchTidy (paths, opts, task, done) {
// gulp.watch returns underlying chokidar watcher
var watcher = gulp.watch(paths, opts, task);
process.on('SIGINT', function() {
// chokidar 3 is async and needs .then()
// chokidar 2 (gulp glob-watcher depends on chokidar2)
watcher.close();
done();
});
return watcher;
}
And then instead of something like this...
function taskWatchJavascript() {
var watchOpts = {delay: 1000};
return gulp.watch('src/**/*.js', watchOpts, taskBuildJavascript);
}
...you do this...
function taskWatchJavascript(done) {
var watchOpts = {delay: 1000};
return gulpWatchTidy ('src/**/*.js', watchOpts, taskBuildJavascript, done);
}
Our utility function takes the gulp async callback and handles the SIGINT (CTRL-C) to clean up or stop the watcher (or whatever) and then let gulp know we are done.
The Did you forget to signal async completion? error then goes away because we cleaned up our forever tasks and let gulp know they were all done.