javascript 如何使用 gulp 将已安装 Bower 包的链接注入到 html 文件中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24807797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use gulp to inject to an html file the links for the installed Bower packages
提问by pwnHyman
I made a gulpfile to setup a front-end development working environment.
我做了一个 gulpfile 来设置前端开发工作环境。
Here is how it works:
下面是它的工作原理：
The script grabs Bower packages defined in bower.json and outputs in to the /public folder the main files of every installed package, js and css in their respective production folders (/public/js) (/public/css).
该脚本获取 bower.json 中定义的 Bower 包，并将每个已安装包的主要文件、js 和 css 的主要文件输出到 /public 文件夹中，它们位于各自的生产文件夹 (/public/js) (/public/css) 中。
The scripts also starts a watch task on all files, css, js and html files and whenever I save those files on the development folder (/src) their /public counterparts will be updated in real-time.
这些脚本还会启动对所有文件、css、js 和 html 文件的监视任务，每当我将这些文件保存在开发文件夹 (/src) 上时，它们的 /public 对应文件都会实时更新。
This way i simply install packages locally with Bower and by running this gulpfile i will have the production files ready in my /public folder, but i need to link them!
通过这种方式，我只需使用 Bower 在本地安装软件包，并通过运行此 gulpfile 我将在我的 /public 文件夹中准备好生产文件，但我需要链接它们！
As said, the missing part that I want the script to write links to those files in the head of my index.html, based on what packages I decided to install from Bower.
如上所述，我希望脚本根据我决定从 Bower 安装的软件包在 index.html 的头部写入指向这些文件的链接的缺失部分。
So for example, if I downloaded Bootstrap, I want the script to automatically inject in to the head of my html page the link to Bootstrap css and js files right before the body closing tag (ideally).
例如，如果我下载了 Bootstrap，我希望脚本在正文结束标记（理想情况下）之前自动将 Bootstrap css 和 js 文件的链接注入到我的 html 页面的头部。
Here's my script on github, have a look at the README and at the gulpfile:
这是我在github上的脚本，请查看自述文件和gulpfile：
I don't know what approach and/or if there's a gulp plugin to use to achieve that, if someone can point me in the right direction i would appreciate very much. Thanks.
我不知道什么方法和/或是否有一个 gulp 插件可以用来实现这一点，如果有人能指出我正确的方向，我将不胜感激。谢谢。
采纳答案by Tim
For this I currently use gulp-inject, works like a charm!
为此，我目前使用gulp-inject，效果很好！
回答by fseminario
How about just using
只用怎么样
gulp wiredep
Example:
例子：
Add Holder.js package to existing Yeoman/Bower/Gulp project.
将 Holder.js 包添加到现有 Yeoman/Bower/Gulp 项目中。
bower install holderjs --save
This added it to the dependency array. After you need to get it added to your html by using
这将它添加到依赖项数组。在您需要通过使用将其添加到您的 html 之后
gulp wiredep
回答by Saulius
I was looking for this too. And it seems that gulp-processhtmlplugin can fit for this task and/ or gulp-replaceand/ or gulp-preprocess.
我也在找这个。似乎gulp-processhtml插件可以适合这个任务和/或gulp-replace和/或gulp-preprocess。
