gulp-inject is giving wrong relative path - html

Question

I've been having trouble with this useful tool and I don't know what to do anymore, that's why I come here to ask for your help.
This is my directory structure:
- Project root
|- dist
|-css
|-js
|- source
|- css
|- js
|-index.html
|-gulpfile.js
|-index.html
So, I'm using gulp to inject my css,js from the source folder, into my dist folder, minified, concatenated, etc. Then, inject that into my index.html in the source folder and spit in on the project root folder.
This is the code:
//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('./'));
});
The issue is that the path to the dist folder on the index.html is like this:
"/dist/css/stylesheet.css"
Causing error, because it should be : `"dist/css/stylesheet.css"
As you can see in the code, I've used the inject's options, ignorePath, addRootSlash, relative:true , and nothing seems to work. The same thing was happening to wiredep, but this one is accepting the ignorePath options so everything is fine.
Thanks in advance for your help.

Answer 1

It looks like you mistakenly put the inject options as a second parameter on the pipe function. Try:
target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false }))

Answer 2

You should set relative option in the inject like this:
inject(sources, { relative: true })

Answer 3

you can use the two option od gulp inject:
ignorePath and addRootSlash
var injectOptions = {
addRootSlash: false,
ignorePath: 'dist/'
};
target.pipe(inject(sources),injectOptions)

Answer 4

I know, this is old.
But for everyone with the same problem, like in my case.
Setting
var options = {
relative: false,
addRootSlash: false,
ignorePath: 'dist/',
addPrefix: './js'
};
return gulp.src(['./index.html'])
.pipe(inject(stream, options))
.pipe(gulp.dest('temp/'));
does the trick for me.
I had to remove the path by setting 'ignorePath' and then 'removeRootSlash' and 'addPrefix' for the destination folder.
See the More Examples section at npm gulp-inject and the addPrefix part.