如何使用gulp向html文件注入已安裝的Bower包的鏈接

Question

我制作了一個gulpfile來設置前端開發工作環境。

下面是它的工作原理：

該腳本獲取bower.json中定義的Bower包，並將每個已安裝包的主文件（js和css）輸出到/ public文件夾中的各個生產文件夾（/ public / js）（/ public / css）。

腳本還會對所有文件，css，js和html文件啟動監視任務，每當我將這些文件保存在開發文件夾（/ src）上時，它們/公共對應文件將實時更新。

這樣我只需在Bower本地安裝軟件包，並通過運行這個gulp文件，我將生成文件准備好在我的/公共文件夾中，但我需要鏈接它們！

如上所述，我希望腳本根據我決定從Bower安裝的軟件包編寫鏈接到index.html頭部的文件的缺失部分。

因此，例如，如果我下載了Bootstrap，我希望腳本能夠在我的html頁面的頭部自動注入Bootstrap css和js文件的鏈接，直接在正文結束標記之前（理想情況下）。

這是我在github上的腳本，看一下README和gulpfile ：

我不知道采用什么方法和/或是否有一個gulp插件來實現這一目標，如果有人能指出我正確的方向我會非常感激。 謝謝。

Answer 1

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

Answer 2

我也在尋找這個。 似乎gulp-processhtml插件可以適合這個任務和/或gulp-replace和/或gulp-preprocess 。

Answer 3

如何使用

gulp wiredep

例：

將Holder.js包添加到現有的Yeoman / Bower / Gulp項目中。

bower install holderjs --save

這將它添加到依賴數組中。 在你需要通過使用它添加到你的HTML后

gulp wiredep