Running Gulp tasks in sequence does not seem to wo

问题:

I am pretty new to Gulp and I kind of love it but also kind of don't really understand it at all so I might be going about this the wrong way entirely.

I have a file structure like this:

main
|-build
  |-big_file1.txt
  |-big_file2.txt
  |-small_file3.txt
  |-med_file4.txt

I want to copy the contents of build to a new dir and then delete some files so I set up two tasks like this:

var gulp = require("gulp");
var foreach = require("gulp-foreach");
var del =require("del");

gulp.task("taskA", function(cb){
    var err = undefined;
    gulp.src("./build/*file*")
        .pipe(foreach(function(stream, file){
            stream.pipe(gulp.dest("./test"));
            return stream;
        }));

    cb(err);
});

gulp.task("taskB", ["taskA"], function(cb){
    var err = undefined;
    del(["./test/*big*"]);
    cb(err);
});

When I manually run gulp taskA the duplicate files appear in ./test as expected and if I then run gulp taskB the ones prefixed with big are deleted. All groovy and as expected.

I then try to run the tasks in sequence like this:

gulp.task("both", ["taskA", "taskB"]);

gulp.task("taskA", function(cb){
    var err = undefined;
    gulp.src("./build/*file*")
        .pipe(foreach(function(stream, file){
            stream.pipe(gulp.dest("./test"));
            return stream;
        }));

    cb(err);
});

gulp.task("taskB", ["taskA"], function(cb){
    var err = undefined;
    del(["./test/*big*"]);
    cb(err);
});

And it doesn't work the same way. The log says that taskA is started then finished THEN taskB THEN both and the duplicate files are created in ./test but the deletion never occurs. Can anyone explain what is happening here and suggest a way to fix it?

Thank you in advance :)

回答1:

Making the tasks sequential

Well, based on the description you give, you should just return your streams to tell gulp when your tasks finished:

gulp.task("taskA", function (){
    return gulp.src("./build/*file*")
        .pipe(gulp.dest("./test"));
});

gulp.task("taskB", ["taskA"], function (){
    return del(["./test/*big*"]);
});

It is possible to use callbacks but you need to call them in the right place. In the code in your question you call them before the operations to be performed by gulp.src().pipe... have had a chance to run. They are asynchronous.

Simplifying the Gulpfile

I've explained how to fix your code so that the sequencing would work but you could combine the two tasks into one with;

gulp.task("single", function (){
    return gulp.src(["./build/*file*", "!./build/*big*"])
        .pipe(gulp.dest("./test"));
});

Given the input you've shown, this will give you the same result as running the task both. It copies the files that match ./build/*file* but not ./build/*big* because of the exclamation point at the beginning of the 2nd pattern. This has the advantage of not doing needless copying only to delete extraneous files afterwards.