gulp-filter not filtering out excluded files correctly

Question

I'm experimenting with using gulpjs instead of grunt for a project. I'm attempting to use gulp filter to ignore vendor libraries when running jsHint on my code. I've based my code off of the code from the readme's example, but the files have not been filtered.

I'm running node 0.10.26, gulp 3.8.0,and gulp filter 0.4.1

I'm trying to run jshint on a directory wcui/app/js that contains many other directories of JS files, with about 120 js files total. I want to exclude the vendor directory only.

My code looks like this:

var gulp = require('gulp');
var gulpFilter = require('gulp-filter');
var jshint = require('gulp-jshint');

var srcs = {
    scripts: ['wcui/app/js/**/*.js'],
    styles:  ['wcui/app/css/**/*.less','wcui/app/css/**/*.css']
};

var dests = {
    scripts: 'wcui/static/js/',
    styles: 'wcui/static/css/'
};

gulp.task('scripts', function() {
    var filter = gulpFilter('!wcui/app/js/vendor');
    return gulp.src(srcs.scripts)
        .pipe(filter)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(filter.restore)
        .pipe(gulp.dest(dests.scripts));
});

gulp.task('styles', function() {
    return gulp.src(srcs.styles)
        .pipe(gulp.dest(dests.styles));
});

gulp.task('dev',['scripts','styles']);

Right now running gulp dev does the same thing it did before I added the filter, linting every js file. How can I change this to make it filter correctly? The gulp example had the src in the format 'wcui/app/js/*.js' but when I admit the ** glob, I don't get subdirectories at all. Other than that I think I'm following the readme to the letter (with changes for my particular task).

Answer 1

For readers that have a more up-to-date version of gulp-filter (release at the time of writing is 1.0.0)

The release of version 0.5.0 of gulp-filter introduced multimatch 0.3.0 which come with a breaking change.

Breaking change

Using a negate ! as the first pattern no longer matches anything.

Workaround: ['*', '!cake']

Basically, what it means is you need to replace

var filter = gulpFilter('!wcui/app/js/vendor');

with

var filter = gulpFilter(['*', '!wcui/app/js/vendor']);

and you are good to go.

---

Also, as noted in the comment by MildlySerious, you should have .pipe(filter.restore()) instead of .pipe(filter.restore)