Question

我正在研究从gulp / grunt切换到仅使用npm脚本。但我真的无法解决如何从给定路径获取* .js和* .css并将其添加到index.html文件中。

我必须通过“index.js”文件添加它，或者我可以执行类似......

的操作

"scripts": {
 "inject": "inject src/app/*.js",
},

然后它会将它添加到我的index.html中，我已将其指定为...

/* inject:js */

Answer 1

克里斯特拉维斯的建议非常好。所以使用https://www.npmjs.com/package/postbuild

解决了我的问题的答案

Answer 2

在这个热门话题中，过去3个月没有答案，可能是因为问题中存在错误的假设。提炼你的问题，

...如何从给定路径获取* .js和* .css并将其添加到index.html文件

简而言之，手动执行。使用一个好的npm样板文件，例如npm-build-boilerplate，并将已编译的JS和CSS文件手动添加到HTML中。

...我必须通过＆＃34; index.js＆＃34;添加它。文件，或＆lt;第二个选项＆gt;

没有。手动添加文件。让我详细说明一下。

使用npm脚本构建一个管道，您知道您的uglified JS文件和已编译的SCSS文件的呈现位置。是的，我"main": "index.js",中有package.json行，但是没有＆＃34; index.js＆＃34;在我的项目中。我得到npm脚本来处理各种文件夹中的文件，将它们输出到其他文件夹中，我手动将最终的CSS和JS文件添加到HTML模板中（在我的例子中，静态Hugo网站的模板）。

我看到一个案例，＆＃34;活力＆＃34;在HTML中需要 - 当您想要缓存缓存并将唯一字符串添加到端点CSS / JS文件名时。但是，您可能需要考虑计算文件 MD5哈希的脚本。内容，因为如果您多次运行构建并且现有的CSS或JS文件没有更改，则您希望保留旧文件名。访问者可能已缓存它们（并考虑CDN）。从这个意义上说，上面评论中提到的npm postbuild脚本是次等的，因为它只使用＆＃34;版本＆＃34;计数器。寻找npm postbuild的替代品来破坏缓存。

使用npm脚本将* .js和* .css注入index.html

2 个答案: