Why does gulp.src not like being passed an array of complete paths to files?

I'm attempting to pass gulp.src an array of files that I want it to deal with. This is the array as it stands.

['bower_components/jquery/jquery.js',
 'bower_components/superscrollorama/js/greensock/TweenMax.min.js',
 'bower_components/superscrollorama/jquery.superscrollorama.js' ]

I'm finding though that gulp.src doesn't seem to like that and the third element doesn't make it through into the end destination.

I've found that everything works fine when I introduce some wildcard characters like this:

['bower_components/**/jquery.js',
 'bower_components/**/js/greensock/TweenMax.min.js',
 'bower_components/**/jquery.superscrollorama.js' ]

But why? Something to do with the way globbing works? I've googled but can't find out.

Maybe this isn't the intended purpose of globbing but it doesn't make sense to me that it should work this way. Can anyone shed some light?

Solution 1:

When you pass in an array of full paths, each file is processed independently. The globbing doesn't know where the root of the path is (in fact, it guesses based on the first glob). Therefore, each file is rooted in the folder it contains, and the relative path is empty.

However, there is an easy solution. Pass an object with the key base as the second argument to gulp.src, and everything will have the correct relative path:

return gulp.src(['bower_components/jquery/jquery.js',
                'bower_components/superscrollorama/js/greensock/TweenMax.min.js',
                'bower_components/superscrollorama/jquery.superscrollorama.js' ],
            {base: 'bower_components/'})
        .pipe(...);