我正在考虑从 gulp/grunt 切换到仅使用 npm 脚本。 但我无法真正解决如何从给定路径获取 *.js 和 *.css 并将其添加到 index.html 文件中。
我必须通过“index.js”文件添加它还是可以执行类似...
"scripts": {
"inject": "inject src/app/*.js",
},
然后它会将它添加到我指定它的 index.html 中...
/* inject:js */
【问题讨论】：
标签： npm inject script-tag
在过去 3 个月内没有关于这个热门话题的答案，可能是因为问题中有错误的假设。提炼你的问题，
...如何从给定路径获取 *.js 和 *.css 并将其添加到 index.html 文件中
简而言之，手动操作。使用良好的 npm 样板，例如 npm-build-boilerplate，并将编译后的 JS 和 CSS 文件手动添加到您的 HTML 中。
...我必须通过“index.js”文件添加它，还是
没有。手动添加文件。让我详细说明。
使用 npm 脚本，您可以构建一个管道，并且您知道丑化的 JS 文件和编译的 SCSS 文件在哪里呈现。是的，我的package.json 中有"main": "index.js", 行，但我的项目中根本没有“index.js”。我得到 npm 脚本来处理各种文件夹中的文件，将它们输出到其他文件夹中，然后我手动将最终 CSS 和 JS 文件添加到 HTML 模板中（在我的例子中，是静态 Hugo 网站的模板）。
我看到了一种需要 HTML 中的“动态性”的情况——当您想要破坏缓存并将唯一字符串添加到端点 CSS/JS 文件名时。但是，您可能需要考虑计算文件内容的 MD5 哈希 的脚本，因为如果您多次运行构建并且您现有的 CSS 或 JS 文件没有更改，您希望 MD5 hash em>保留旧文件名。访问者可能已经缓存了它们（并且也考虑了 CDN）。从这个意义上说，上面 cmets 中提到的 npm postbuild 脚本是劣质的，因为它只是使用“版本”计数器。寻找 npm postbuild 的替代品来破坏缓存。
【讨论】：
Chris Traveis 的建议非常有效。 所以我的问题的答案是使用https://www.npmjs.com/package/postbuild
【讨论】：