将 JS 注入到具有匹配文件名的 HTML 页面中答案

【问题标题】：Injecting JS into HTML pages with matching filenames将 JS 注入到具有匹配文件名的 HTML 页面中
【发布时间】：2020-11-13 21:46:52
【问题描述】：

我希望能够使用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 来实现，还是需要其他包？

【问题讨论】：

标签： node.js npm gulp node-modules gulp-inject

【解决方案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>';
    }
})

【讨论】：