user2430929
user2430929

Reputation: 113

gulp-inject is giving wrong relative path

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.

Upvotes: 1

Views: 5770

Answers (4)

JeyPack
JeyPack

Reputation: 56

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.

Upvotes: 0

What-About-Bob
What-About-Bob

Reputation: 649

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 }))

Upvotes: 7

BERGUIGA Mohamed Amine
BERGUIGA Mohamed Amine

Reputation: 6280

you can use the two option od gulp inject: ignorePath and addRootSlash

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

Upvotes: 1

Łukasz Sokół
Łukasz Sokół

Reputation: 19

You should set relative option in the inject like this:

inject(sources, { relative: true })

Upvotes: 1

Related Questions