如何生成相对于 gulp-inject 生成的目标文件的路径

Question

我正在使用 gulp-inject 将一些 css 和 js 文件注入到位于 dist/css/*.css 和 dist/js/*.js[= 的 dist/index.html 21=]

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/'));
});

目前它正在从项目的基础 url 中注入文件，但我希望它注入与目标文件相关的文件链接，即 dist/index.html

从 /dist/css/*.css 到 css/*.css

从 /dist/js/*.js 到 js/*.js

但是它的生成是这样的：

<!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>

对此有什么建议吗？

Answer 1

发现bug，{relative: true}应该在inject()里面，但不在src()

里面

return target.pipe(inject(sources, {relative: true})) 修复了问题。

如何生成相对于 gulp-inject 生成的目标文件的路径

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

npm

gulp

gulp-inject