Question

在gulp中，我正在尝试批量复制，移动并将插件应用于一堆src文件以进行构建过程。请使用gulp-filter为每个步骤拆分所需的文件并应用正确的插件每个，它似乎工作，但只对一些文件。

我得到的问题是“dist”中的最终输出仅部分显示加载的文件。 I.E.它只显示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

如果您想要完成所有任务的任务，我会建议采用不同的方法。而不是src所有文件然后过滤，创建多个流，然后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

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

2 个答案: