How to use gulp to inject to an html file the links for the installed Bower packages

Question

I made a gulpfile to setup a front-end development working environment.

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).

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.

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!

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.

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).

Here's my script on github , have a look at the README and at the 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.

Answer 1

为此，我目前使用gulp-inject ，就像一个魅力！

Answer 2

I was looking for this too. And it seems that gulp-processhtml plugin can fit for this task and/ or gulp-replace and/ or gulp-preprocess .

Answer 3

How about just using

gulp wiredep

Example:

Add Holder.js package to existing Yeoman/Bower/Gulp project.

bower install holderjs --save

This added it to the dependency array. After you need to get it added to your html by using

gulp wiredep