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();
  });

});

Answer 1

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']);