Gulp-inject inject file wrong path

Question

I have tried to inject file to index.html file but the path file is not correct. Could you tell me why it happen ?

Folder structure

gulpfile.js

gulp.task('index', function () {

    let target = gulp.src('./src/index.html');
    // let sources = gulp.src(['./src/resources/js/*.js'],  {read: false})
    //     .pipe(concat('app.js'))
    //     .pipe(gulp.dest('./src'))
    var vendorStream = gulp.src(['./src/resources/js/*.js'])
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./dist'));
    return target.pipe(inject(vendorStream)).pipe(gulp.dest('./dist'))
})

The index file was generated by gulp

Answer 1

Try changing this line:

return target.pipe(inject(vendorStream)).pipe(gulp.dest('./dist'))

to:

return target.pipe(inject(vendorStream, { relative:true })).pipe(gulp.dest('./dist'));

See injecting files relative to the target file:

By default the injected file paths are relative to each source file's cwd (see options.ignorePath). If options.relative is set to true each injected path will be relative to each target file's directory instead.

So the

relative: true

option will make the js file(s) injected be relative to the target html file, which in your case are in the same directory.