一个流中的 Gulp-filter 不为 dest 提供所有文件

Question

在 gulp 中，我目前正在尝试批量复制、移动和应用插件到一堆 src 文件以进行构建过程。尝试使用 gulp-filter 将每个步骤所需的文件拆分并应用正确的插件每个，它似乎都有效，但仅适用于某些文件。

我遇到的问题是“dist”中的最终输出只显示了部分加载的文件。 IE。它只显示 css 和 img 文件夹，只有一半的图像，同样只有一半的 lib 全部被拉过。可以肯定的是，它不是默默失败的插件之一。有时它不会在 src 文件上完全递归。

尝试删除像图像插件这样的步骤，但仍然有同样的问题。

理想情况下这是我想要使用的（目前正在使用但有这些问题）：

var sourceFiles = [
    '!./js/_src',
    './js/**',
    './css/**/*.css',
    './img/**',
    './files/**',
    '!./login/_src',
    './login/**'
]
gulp.task('build',['clean'], function(){

    var replaceVersion = [/%version/gi,'v=' + p.version ];

    var filterHTML  = filter('**/*.html');
    var filterJSON  = filter('**/*.json');
    var filterENV   = filter('**/env.js');
    var filterIMG   = filter('img/**/*.*');

    gulp
        .src(sourceFiles, {base: './'})

        .pipe(plumber({
            errorHandler: onError
        }))

        .pipe(filterHTML)
            .pipe(replace([replaceVersion]))
            .pipe(minifyhtml())
        .pipe(filterHTML.restore())

        .pipe(filterJSON)
            .pipe(minifyjson())
        .pipe(filterJSON.restore())

        .pipe(filterENV)
            .pipe(replace([replaceVersion]))
        .pipe(filterENV.restore())

        .pipe(filterIMG)
            .pipe(imagemin({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                use: [pngcrush()]
            }))
        .pipe(filterIMG.restore())

        .pipe(gulp.dest(paths.dist))

        .pipe(notify({
            title: 'Gulp BUILD Success ????',
            icon: path.join(__dirname, '/_assets/gulp.png'),
            onLast: true,
            wait: true
        }));

}); 

这是一种肮脏/凌乱/冗长的方式，我目前正在解决，直到找到解决方案：

gulp.task('build', function(){

    console.log('----------------------------------------------------');
    console.log('                     v'+ p.version);
    console.log('----------------------------------------------------');

    setTimeout(function(){ // few seconds delay to display message above

        runSequence(
            [
                'clean'
            ],
            [
                'build:index',
                'build:styles',
                'build:files',
                'build:icons',
                'build:scripts',
                'build:libs',
                'build:templates',
                'build:resource',
                'build:img',
                'build:login',
                'build:signup',
                'build:recommend'
            ],
            [
                'build:setVersion'
            ],
            [
                'build:compressHTML',
                'build:compressJSON',
                'build:compressIMG'
            ],
            function(){
                console.log('Build Complete');
            }
        )

    }, 3000)

});

gulp.task('build:index', function(){
    return gulp
        .src(['index.html'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:styles', function(){
    return gulp
        .src(['css/**/*.css', 'css/maps/*.*'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:files', function(){
    return gulp
        .src('files/**/*.*', { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:icons', function(){
    return gulp
        .src('icons/**/*.*', { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:scripts', function(){
    return gulp
        .src([‘js/app.min.js', 'js/env.js', 'js/main.js', 'js/maps/app.min.js.map'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:libs', function(){
    return gulp
        .src(['js/lib/**/*.*','!js/lib/_src/**'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:templates', function(){
    gulp
        .src(['js/templates/**/*.*'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:resource', function(){
    return gulp
        .src(['js/resource/*.*'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:img', function(){
    return gulp
        .src(['img/**/*.*'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:login', function(){
    return gulp
        .src(['login/**/*.*' ,'!login/_src/**'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:signup', function(){
    return gulp
        .src(['signup/**/*.*' ,'!signup/_src/**'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build:recommend', function(){
    return gulp
        .src(['recommend/**/*.*' ,'!recommend/_src/**'], { base: './'})
        .pipe(gulp.dest(paths.dist));
});


gulp.task('build:setVersion', function(){
    return gulp
        .src([paths.dist + 'index.html', paths.dist + '/**/*.html', paths.dist + '/**/env.js'], { base: './'})
        .pipe(replace([version]))
        .pipe(gulp.dest('.'));
});


gulp.task('build:compressHTML', function(){
    return gulp
        .src([paths.dist + '/**/*.html'], { base: './'})
        .pipe(minifyhtml())
        .pipe(gulp.dest('.'));
});

gulp.task('build:compressJSON', function(){
    return gulp
        .src([paths.dist + '/**/*.json'], { base: './'})
        .pipe(minifyjson())
        .pipe(gulp.dest('.'));
});

gulp.task('build:compressIMG', function(){
    return gulp
        .src([paths.dist + '/img/**/*.*'], { base: './'})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest('.'));
});

Answer 1

如果您想要一个可以完成所有任务的任务，我会推荐一种不同的方法。与其srcing 所有文件然后过滤，不如创建多个流然后merge 将它们放在一起。

var merge = require('merge-stream');
gulp.task('build',['clean'], function(){

    var replaceVersion = [/%version/gi,'v=' + p.version ];

    var htmlStream = gulp.src('**/*.html', base: './'})
            .pipe(replace([replaceVersion]))
            .pipe(minifyhtml()),
        jsonStream = gulp.src('**/*.json', base: './'})
            .pipe(minifyjson())
        envStream = gulp.src('**/env.js', base: './'})
            .pipe(replace([replaceVersion]))
        imgStream = gulp.src('img/**/*.*', base: './'})
            .pipe(imagemin({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                use: [pngcrush()]
            }));

    return merge([htmlStream, jsonStream, envStream, imgStream])
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(filterIMG.restore());
});

我在这方面取得了成功。每个流都单独指定，对我来说更具可读性。

Answer 2

这是一个错误，我们在上一个主要版本中修复了它。 https://github.com/sindresorhus/gulp-filter/issues/29