gulpgulp-inject

Gulp-inject inject file wrong path


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

enter image description here

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

enter image description here


Solution

  • 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.