Làm thế nào để sử dụng gulp để tiêm vào một tệp html các liên kết cho các gói Bower đã cài đặt

Question

Tôi đã tạo một tệp gulpfile để thiết lập môi trường làm việc phát triển front-end.

Dưới đây là cách hoạt động:

Kịch bản lấy Bower gói theo quy định tại bower.json và đầu ra vào thư mục/công các tập tin chính của mỗi gói cài đặt, js và css trong thư mục sản xuất của mình (/ public/js) (/ public/css).

Các tập lệnh cũng bắt đầu tác vụ xem trên tất cả các tệp, css, js và html và bất cứ khi nào tôi lưu các tệp đó vào thư mục phát triển (/ src) các đối tác công khai của chúng sẽ được cập nhật theo thời gian thực. Bằng cách này tôi chỉ cần cài đặt gói tại địa phương với Bower và bằng cách chạy gulpfile này tôi sẽ có các tập tin sản xuất đã sẵn sàng trong thư mục/công cộng của tôi, nhưng tôi cần phải liên kết chúng!

Như đã nói, phần còn thiếu mà tôi muốn tập lệnh viết liên kết đến các tệp đó trong phần đầu của index.html, dựa trên những gói tôi đã quyết định cài đặt từ Bower. Vì vậy, ví dụ, nếu tôi đã tải Bootstrap, tôi muốn tập lệnh tự động chèn vào đầu trang html của tôi liên kết tới tệp Bootstrap css và js ngay trước thẻ đóng của cơ thể (lý tưởng). Ví dụ :,.

Dưới đây là kịch bản của tôi trên github, có một cái nhìn tại README đồng gulpfile:

Tôi không biết cách tiếp cận những gì và/hoặc nếu có một ngụm cắm sử dụng để đạt được điều đó, nếu ai đó có thể chỉ tôi đi đúng hướng tôi sẽ đánh giá rất cao. Cảm ơn.

Answer 1

Đối với điều này tôi hiện đang sử dụng gulp-inject, hoạt động như một sự quyến rũ!

Answer 2

Tôi cũng đang tìm kiếm điều này. Và có vẻ như plugin gulp-processhtml có thể phù hợp với nhiệm vụ này và/hoặc gulp-replace và/hoặc gulp-preprocess.

Answer 3

Làm thế nào về chỉ sử dụng

gulp wiredep 

Ví dụ:

Thêm Holder.js gói cho dự án Yeoman/Bower/Gulp hiện có.

bower install holderjs --save 

Điều này đã thêm nó vào mảng phụ thuộc. Sau khi bạn cần thêm mã vào html của mình bằng cách sử dụng

gulp wiredep