时间戳

首页 > 解决方案 > 将 JS 注入到具有匹配文件名的 HTML 页面中

node.js - 将 JS 注入到具有匹配文件名的 HTML 页面中

问题描述

我希望能够.js使用相同的文件名将文件注入到 HTML 页面中gulp-inject（即，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.jsnpmgulpnode-modulesgulp-inject

解决方案

我设法让它工作。问题是通过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>';
    }
})

推荐阅读