Gulp-inject 注入文件路径错误答案

【问题标题】：Gulp-inject inject file wrong pathGulp-inject 注入文件路径错误
【发布时间】：2018-05-07 10:55:53
【问题描述】：

我尝试将文件注入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生成

【问题讨论】：

注入(vendorStream, { relative:true }) 修复了吗？
@Mark 是的，它已修复，我通过使用 ignorePath 选项找到了其他方式。

标签： gulp gulp-inject

【解决方案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 文件，在您的情况下，目标 html 文件位于同一目录中。

【讨论】：