fairycat

Created:
Updated:
Fairycat

Gulp匹配所有文件时匹配不全的原因,只匹配到16个文件

用gulp处理文件的时候,基本都是自定义的功能,都是用through2来处理闭包的。但对异步这方面了解不深,结果只列出了16个文件。开始以为是通配符的问题,没搞好。后来才发现,是回调用错了。

看两段代码的对比

let gulp = require('gulp');
let through = require('through2');

gulp.task('test', function(){
    let i = 0;
    let j = 0;
    gulp.src('./**/*.*')
        .pipe(through.obj(function(file, enc, cb) {
            console.log('j:'+ ++j);
            cb(null, file);
        }))
        .pipe(through.obj(function(file, enc, cb) {
            console.log('i:'+ ++i);
            cb(null, file);
        }))
        .pipe(through.obj(function(file, enc, cb) {
            console.log(file.path);
            cb(null, file);
        }));
});

结果输出的文件只有16个,但i加到了48个,j加到了80个。3倍和5倍的关系。就像漏斗一样上大下小,所以很形象的,是堵住了吧……

把最后一个cb改一下

let gulp = require('gulp');
let through = require('through2');

gulp.task('test', function(){
    let i = 0;
    let j = 0;
    gulp.src('./**/*.*')
        .pipe(through.obj(function(file, enc, cb) {
            console.log('j:'+ ++j);
            cb(null, file);
        }))
        .pipe(through.obj(function(file, enc, cb) {
            console.log('i:'+ ++i);
            cb(null, file);
        }))
        .pipe(through.obj(function(file, enc, cb) {
            console.log(file.path);
            cb();
        }));
});

这样子,文件的数量和i、j的数量一样了,可以把所有的文件都列出来了。

解决方法:管道末端要把文件放了。

如果在管道的中间,i的那一段,没有调用cb会怎么样?结果是,i只增加一次,然后都堵住了,j加到了32。

如果在管道的中间,i的那一段,调用cb但不传入file呢,结果管道就像断了一样,后边的file没得打印,i和j都加到所有文件的总数。

结论,cb回调的意思是,本环节完成,传文件给下一个环节。最后一个环节,调用cb不带参数,意思就是,加工完了,把文件放了。若抓着不放,管道就堵了。

评论

Name

Email

Website

Subject