How to get relative source using gulp.src()

Question

I have a file at /components/slider/index.html. I setup a gulp task that injects related css/js files from separate folders using gulp-inject.

gulp.task('default', function() {

    return gulp.src('./components/**/*.html')
    .pipe( inject(gulp.src(['./assets/css/bootstrap/*.css'], {read: false}), { relative: true }) )
    .pipe( inject(gulp.src(['./assets/js/jquery/*.js'], {read: false}), {starttag: '<!-- inject:head:{{ext}} -->', relative: true} ) )
    .pipe(gulp.dest('./dist'));

});

Now I need to get the source of a js file, located along side of the html source we are pipe-ing, in order to inject it relativley using gulp-inject.

Is there anyway to get gulp.src('./components/**/*.html') in a pipe and somehow get the sibling js file from there? Any suggestion?

Answer 1

It turns out you can not do that using gulp-inject, So what I did was to get a list of directory paths, and then do gulp-inject on each of them separately.

This way I had access to all the folders & files paths before I even begin injecting.

var fs = require('fs');
var dirPath = '/components/widgets/';
var result = [];  //this is going to contain paths

fs.readdir(__dirname + dirPath, function (err, filesPath) {
    if (err) throw err;
    result = filesPath.map(function (filePath) {
        return dirPath + filePath;
    });

    function do_inject(entry) {
        // Injection Code using gulp-inject
    }

    result.forEach(function(entry) {
        do_inject(entry);
    });

});

Also I ended up using "addPrefix" and "addRootSlash" options for my gulp-inject to make it behave how I want. Just some additional info, it may help someone.