将JS注入具有匹配文件名的HTML页面

Question

我希望能够使用gulp-inject将具有相同文件名的.js文件注入到HTML页面中(例如，index.min.js注入到index.html中，data.min.js注入到data.html中)。我将缩小的文件存储在build/js中，而.html存储在src/中。我试过了：

src('src/*.html')
    .pipe(inject(src('build/js/*.min.js'), {
        starttag: '<!-- inject:{{path}} -->',
        relative: true
    }))
    .pipe(dest('build/'));

await Promise.resolve('Javascript injected.');

以下是使用gulp运行它时的终端输出

[23:17:24] Starting 'injectJS'...
[23:17:24] Finished 'injectJS' after 19 ms
[23:17:24] gulp-inject Nothing to inject into data.html.
[23:17:25] gulp-inject Nothing to inject into index.html.

具有相关开始和结束标记的index.html文件：

<!-- inject:index.min.js -->
<!-- endinject -->

这可以使用gulp-inject本身来实现吗，或者我需要其他包吗？

Answer 1

我设法让它工作了。问题是，通过在选项中使用relative: true，文件路径在实际文件名之前包含../build/js/，这是通过使用ignorePath: '../build/js'删除额外的路径信息来解决的。最后，inject调用如下所示：

inject(src('build/js/*.min.js', { read: false }), {
    removeTags: true,
    starttag: '<!-- inject:{{path}} -->',
    relative: true,
    ignorePath: '../build/js',
    transform: (path) => {
        return '<script src="js/' + path + '"></script>';
    }
})