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：

  

默认情况下，注入的文件路径是相对于每个源文件的   cwd（参见options.ignorePath）。如果options.relative分别设置为true   注入路径将相对于每个目标文件的目录   代替。

所以

relative: true

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