How to use gulp to insert links in html file for installed Bower packages

Question

I created a gulpfile file to customize the interface development workspace.

Here's how it works:

The script captures the Bower packages defined in bower.json and outputs to the / shared folder the main files of each installed js and css package in their respective folders (/ public / js) (/ public / css).

The scripts also run the browsing task in all files, css, js and html files, and whenever I save these files in the development folder (/ src), their / public copies will be updated in real time.

This way, I just install packages locally with Bower, and by running this gulpfile, I will have the finished files in my / shared folder, but I need to link them!

As said, the missing part, in which I want the script to write links to these files in the head of my index.html, is based on what packages I decided to install from Bower.

So, for example, if I downloaded Bootstrap, I want the script to automatically enter a link to Bootstrap css and js files directly in front of the body closing tag (ideally) in the head of my html page.

Here is my script on github , see README and gulpfile :

I do not know which approach and / or if there is a gulp plugin to use, if someone can point me in the right direction, I would really appreciate it. Thanks.

Answer 1

For this, I am currently using gulp-inject , it works like a charm!

Answer 2

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

Answer 3

How easy to use

gulp wiredep 

Example:

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

 bower install holderjs --save 

This added it to the array of dependencies. After you add it to your html using

 gulp wiredep