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

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

Injecting JS into HTML pages with matching filenames

node.js

npm

node-modules

gulp

gulp-inject