[SOLVED] How can I generate path relative to the target file generated by gulp-inject

How can I generate path relative to the target file generated by gulp-inject

I am using gulp-inject to inject some css and js files to the dist/index.html which are located at dist/css/*.css and dist/js/*.js

gulp.task('prep-index', function () {
  var target = gulp.src('./dist/index.html');
  var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false}, {relative: true});

  return target.pipe(inject(sources))
    .pipe(gulp.dest('./dist/'));
});

Currently it is injecting files from the base url of the project, but I want it to inject files links relative from target file i.e. dist/index.html

from /dist/css/*.css to css/*.css

and from /dist/js/*.js to js/*.js

But its generating like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Directi Task</title>
    <!-- inject:css -->
    <link rel="stylesheet" href="/dist/css/basscss.min.css">
    <link rel="stylesheet" href="/dist/css/style.css">
    <!-- endinject -->
  </head>
  <body>
    <!-- inject:js -->
    <script src="/dist/js/jquery.min.js"></script>
    <script src="/dist/js/script.min.js"></script>
    <!-- endinject -->
  </body>
</html>

Any tips on this?

Solution

Found the bug, the {relative: true} should be inside the inject() but not within src()

return target.pipe(inject(sources, {relative: true})) fixed the problem.