Gulp-inject 注入文件路径错误

Question

我已尝试将文件注入 index.html 文件，但路径文件不正确。你能告诉我为什么会这样吗？

文件夹结构

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

索引文件由gulp

生成

Answer 1

尝试更改此行：

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

至：

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

参见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.

所以

relative: true

选项将使注入的 js 文件相对于目标 html 文件，在您的情况下它们位于同一目录中。

Gulp-inject 注入文件路径错误

Gulp-inject inject file wrong path

gulp

gulp-inject