gulp-filter filters out all files

Question

I'm working on moving my workflow over to Gulp, and I'm loving it so far; however, I seem to have misunderstood something about how the gulp-filter plugin works...

I have the following task:

gulp.task('assets', function() {
    var stylesFilter = gulpFilter(stylesPath);
    var imagesFilter = gulpFilter(imagesPath);
    var scriptsFilter = gulpFilter(scriptsPath);

    return gulp.src([].concat('app/**/*.html', stylesPath, imagesPath, scriptsPath))
        // STYLES
        .pipe(stylesFilter)
        .pipe(gulp.dest('dist/test_styles')) // For debugging!
        .pipe(sass({style: 'expanded' }))
        .pipe(autoPrefixer('> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1'))
        .pipe(concat('main.css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/css'))
        .pipe(stylesFilter.restore())

        // SCRIPTS
        .pipe(scriptsFilter)
        .pipe(gulp.dest('dist/test_scripts')) // For debugging!
        .pipe(jsHint('.jshintrc'))
        .pipe(jsHint.reporter('jshint-stylish'))
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/js'))
        .pipe(scriptsFilter.restore())

        // IMAGES
        .pipe(imagesFilter)
        .pipe(gulp.dest('dist/test_images')) // For debugging!
        .pipe(cache(imageMin({ optimizationLevel: 7, progressive: true, interlaced: true })))
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/img'))
        .pipe(imagesFilter.restore());
});

The path variables I'm using are defined as follows:

var stylesPath = [
    'bower_components/foundation/scss/normalize.scss', 
    'bower_components/foundation/scss/foundation.scss',
    'app/styles/app.scss'
],
scriptsPath = [
    'app/scripts/**/*.js',
    '!app/scripts/**/*_test.js'
],
imagesPath = [
    'app/images/**/*'
];

My problem is that the stylesFilter, imagesFilter, and scriptsFilter are filtering out everything! I've tried adding the lines marked as "for debugging" in the task above in order to see which files it is working on in each filtered section, which shows that all files are being filtered out (i.e. no files are written to disk with the gulp.dest() statements marked as being for debugging above). If I add a line for outputting the files after any of the .pipe(*Filter.restore()) lines it outputs all the files from the original input (which are the correct files). I've also, for good measure, tried using a negated pattern for the filters, but that had the exact same result.

So what am I missing? Why is nothing returned by the filters?

Answer 1

OK, so I've found the reason for this behavior:

gulp-filter uses the multimatch module behind the scenes, and it uses Vinyl file objects for the files it reads, and it passes File.relative to the multimatch function (which is the relative path in relation to File.base, which is equal to the first glob). So when I used 'bower_components/foundation/scss/normalize.scss' as a glob File.relative only contained the file name, and 'bower_components/foundation/scss/normalize.scss' doesn't match 'normalize.scss'.

Answer 2

Your pipeline is way too long and attempt to process unrelated things.

I'd rather start a pipeline per type of asset in different tasks running in parallel.