Purpose of `return` Statement and `callback` Reference in Gulp Task

问题

I was having trouble getting gulp run-sequence to execute both functions that i gave it (it would only execute one of them. I had something like this:

gulp.task('wire', function(){
  gulp.src('./index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('.'));
});

var filesToInject = ['./app/**/*.js', './app/**/*.css'];
gulp.task('inject', function (){
  var target = gulp.src('./index.html');
  var sources = gulp.src(filesToInject, {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('.'));
});

gulp.task('wire-inject',  function(callback){
    sequence('wire', 'inject', callback);
});

That would only run the inject task. Only when I added a return before gulp.src in the wire task would it execute. I also added callback in both function params and passed it to the last pipe in both tasks per the documentation.

gulp.task('wire', function(callback){
  gulp.src('./index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('.'), callback);
});

var filesToInject = ['./app/**/*.js', './app/**/*.css'];
gulp.task('inject', function (callback){
  var target = gulp.src('./index.html');
  var sources = gulp.src(filesToInject, {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('.'), callback);
});

That did not throw any errors, however it doesn't change anything if I take it out. What does this return statement do that magically makes my sequence run completely. What are these callbacks in the documentation that I just pass a reference to with out parentheses to execute them? Do I still need them even though they seemingly do nothing?

回答1:

Gulp needs to know when an asynchronous task is done. You have 3 ways to do this:

1. Return an event stream, which is what you do when you have return gulp.src(...).pipe(...); in your task's function.

2. Return a promise.

3. Have the function that defines you task take a parameter. Gulp will call your function with a callback that you should call when the task is over.

If you do not do this, then Gulp will not know that the task is asynchronous. So it will consider the task done as soon as its function returns. This has all kinds of consequences. Gulp could exit before a task is done. Or it could start a task B that depends on task A before task A is complete. In some cases, you may not see a problem immediately but as your gulpfile gets more complex, you run more chances of getting bad behavior. run-sequence is not special: it needs to know when a task is complete to do its job correctly.

Note that callback in this code which you show in your question is useless:

return target.pipe(inject(sources))
    .pipe(gulp.dest('.'), callback);

callback won't be called. Replace it with function () { console.log("Hello!"); callback(); }. You won't see Hello! on the console because the callback is not called. However, the code does work overall because you return the stream. Gulp uses the stream you return to determine that the task is over, not the callback (which is never called anyway).

来源：https://stackoverflow.com/questions/33418550/purpose-of-return-statement-and-callback-reference-in-gulp-task