how to use gulp-filter with main-bower-files to filter on directory in the middle

Question

I want to filter just the files which include the directory ui-router somewhere in the middle of the path.

I have the following code:

var gulp = require('gulp');


var mainBowerFiles = require('main-bower-files');
var debug = require('gulp-debug');
var gulpFilter = require('gulp-filter');


gulp.task('default',function() {
    var bower_files = mainBowerFiles();
    var js_filter = gulpFilter(['**/*.js']);

    gulp.src(bower_files)
        .pipe(js_filter)
        .pipe(debug({title: 'unicorn:'}))

    var js_filter = gulpFilter(['**/ui-router/**']);

    gulp.src(bower_files)
        .pipe(js_filter)
        .pipe(debug({title: 'unicorn1:'}))
});

The output is:

[12:10:53] unicorn: bower_components\ngstorage\ngStorage.js

[12:10:53] unicorn: bower_components\ui-router\release\angular-ui-router.js

[12:10:53] unicorn: bower_components\x2js\xml2json.min.js [12:10:53]

unicorn1: 0 items

Meaning that ['**/*.js'] works to filter out all js files.

But ['**/ui-router/**'] does not work. What is problematic with this pattern?

I read the following doc https://github.com/isaacs/node-glob and i don't see why it should not work.

Answer 1

After hacking with this a long time i found the issue. In gulp-filter the vinyl file.relative property is sent.Comment from Sindre Sorhus

In our case the files are without globs(What i understand) and therefore we get just the name of the file without the directory.

The solution is to write instead of gulp.src(bower_files) gulp.src(bower_files,{base:__dirname})

Here we say gulp from where to start the relative file.

Answer 2

You can filter the result of main-bower-files:

var files = mainBowerFiles(/\/ui\-router\//);