Set a Gulp task to be the default

Question

I have the following task in my gulpFile, created by someone else on my team:

gulp.task('serve', [], function(){
   gulp.run(
    'fonts',
    'browsersync',
    'watch'
  );
});

I would like to leave it alone, but I also wanted to map the default task to this task. So I tried:

gulp.task('default',['serve']);

It appeared to work, in that the server runs, but for some reason the "watch" task is not happening, I am not getting browser refresh on changes.

It all works as planned if I run "gulp serve" but not "gulp". What did I do wrong?

EDIT: Here's the watch task:

gulp.task('watch', ['styles', 'browsersync'], function() { //'default'
  gulp.watch(
    [
      './app/assets/sass/**/*.scss',
      './app/modules/**/*.scss'
    ], ['styles']);

  gulp.watch([
    './app/**/*.js',
    './app/**/*.html'
  ], function() {
    reload();
  });

});

What does your watch task look like? – Seth Feb 11 '15 at 14:12 — Seth, Feb 11 '15 at 14:12
Added to original question. Sorry. – Steve Feb 11 '15 at 15:11 — Steve, Feb 11 '15 at 15:11

Seth · Answer 1 · 2017-09-25T13:59:01.827

Try updating your default task to include the watch task in the array argument instead of running it inside serve. Like so:

gulp.task('default', ['serve', 'watch']);

If you checkout the Gulp documentation on asynchronous task support, particularly the last example, you'll see that you can require a dependent task to finish before the designated task is supposed to start.

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);

Would you be able to provide information on how to do it in Gulp 4, where one doesn't use array of task names as a second argument? — Jack L., Jan 08 '19 at 12:45

Jon Hieb · Answer 2 · 2015-02-11T17:56:08.383

gulp.run and gulp.start are considered bad practice:

https://github.com/gulpjs/gulp/issues/426
https://github.com/gulpjs/gulp/issues/505

Unfortunately, the answer here appears to be that your coworker may not really understand Gulp. You may not be able to fix this problem without changing their code.

Without more context, like the entire gulpfile, I can't reproduce your exact problem. However, my hunch is that it has something to do with the way that Gulp runs tasks asynchronously/continuously. It may be the case that your 'default' task is exiting prematurely, because gulp.run does not execute synchronously. One way or another, Gulp is confused about which tasks need to wait on what, when. You're using two completely different tools to manage your run-sequence.

Instead of gulp.run, your 'serve' task should really use dependencies to run other tasks:

gulp.task('serve', ['fonts', 'browsersync', 'watch']);
gulp.task('default', ['serve']);

Also, it is worth pointing out that your watch task is already listing 'browsersync' as a dependency. While not technically incorrect (Gulp will ignore it the second time), it can lead to overcomplication and confusion and so probably isn't a good idea. If 'watch' depends on 'browsersync', you can just remove the 'browsersync' dependency from 'serve':

gulp.task('watch', ['styles', 'browsersync'], function () {
  gulp.watch([
    './app/assets/sass/**/*.scss',
    './app/modules/**/*.scss'
  ], ['styles']);

  gulp.watch([
    './app/**/*.js',
    './app/**/*.html'
  ], function() {
    reload();
  });
});
gulp.task('serve', ['fonts', 'watch']);
gulp.task('default', ['serve']);

This should get you the result you're looking for.

All that being said, if you really insist on following bad practice, you might try using gulp.run in your 'default' task:

gulp.task('default', function() {
  gulp.run('serve');
});

I suspect your main problem is that you are mixing the usage of array task dependencies and gulp.run, but either way, gulp.run is "doing it wrong".

You may also want to take a look at the Gulp docs regarding how to ensure that asynchronous tasks are executed in series: https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support — Jon Hieb, Feb 11 '15 at 18:00

August Gong · Answer 3 · 2020-11-08T08:08:28.233

0

Tested in Gulp Version 4, You can run like this:
Note that you may return the function with async.

file name: gulpfile.js

gulp.task('one', async () => {
  // action you desire
});

// If you want to in parallel
gulp.task('default', gulp.parallel('one'));
// If you want to in series
gulp.task('default', gulp.series('one'));

edited Nov 08 '20 at 08:08

answered Nov 08 '20 at 07:46

August Gong

371
4
5

If I run this example with a task "two" and I want to run it as series you will get the error "The following tasks did not complete: default, two Did you forget to signal async completion?" with .parallel('one', 'two') it works, but what if I want to await the first task? – monkey.dsc Feb 15 '23 at 14:25

Set a Gulp task to be the default

3 Answers3