CODEWITHSUNDEEP
node.jsgulpgulp-watch
Steve
Steve

Reputation: 14912

Set a Gulp task to be the default

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

});

Upvotes: 16

Views: 37798

Answers (3)

August Gong
August Gong

Reputation: 411

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

Upvotes: 0

Seth
Seth

Reputation: 10454

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

Upvotes: 16

Jon Hieb
Jon Hieb

Reputation: 780

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".

Upvotes: 8

Related Questions