html - gulp-inject 给出了错误的相对路径

Question

我一直在使用这个有用的工具时遇到问题，我不知道该怎么办了，这就是为什么我来这里寻求您的帮助。

这是我的目录结构:

 - Project root
 |-  dist
     |-css
     |-js

 |-  source
     |- css
     |- js
     |-index.html

 |-gulpfile.js
 |-index.html 

因此，我使用 gulp 将我的 css、js 从源文件夹注入(inject)到我的 dist 文件夹中，进行缩小、连接等操作。然后，将其注入(inject)到源文件夹中的 index.html 中，并吐入到项目根文件夹。这是代码:

//Injects assets (css,js) into index.html automatically
gulp.task('inject',['sass','concat-css','concat-js'],function(){
    //Target to inject
    var target = gulp.src('source/index.html');


    //Sources to be injected

    var cssFiles = gulp.src('./dist/assets/css/*.css',{read:false});
    var jsFiles = gulp.src('./dist/assets/js/*.js',{read:false});
    //Merge resources into one
    var sources = es.merge(cssFiles,jsFiles);


    //Injecting bower.json dependencies and other resources

    return target.pipe(inject(sources),{
       ignorePath:'dist/',
        addRootSlash:false
    })
        .pipe(wiredep({ignorePath:'../'}))
        .pipe(gulp.dest('./'));

   });

问题是 index.html 上 dist 文件夹的路径是这样的:

"/dist/css/stylesheet.css"

导致错误，因为它应该是:`"dist/css/stylesheet.css"

如您在代码中所见，我使用了注入(inject)选项 ignorePath、addRootSlash、relative:true ，但似乎没有任何效果。 wiredep 也发生了同样的事情，但是这个正在接受 ignorePath 选项，所以一切都很好。

预先感谢您的帮助。

Answer 1

看起来您错误地将 inject 选项作为 pipe 函数的第二个参数。尝试:

target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false }))