gulp將header/footer引入頁面 gulp使用gulp-file-include將header/footer引入頁面

前言：在寫靜態頁面的時候，公共的頭部和底部or側邊欄同樣，每寫一個頁面，都要複製粘貼，每當修改後，還要對原先的header、footer修改，這及其麻煩；不更新，部分效果又看不到影響整體效果。

解決：用gulp的插件能夠將header、footer、sidebar的靜態頁面引入每個須要的頁面，只須要寫一段註釋，編譯時，會在註釋內將header、footer、sidebar模板頁面插入。

其餘更爲簡單方便的方法：gulp使用gulp-file-include將header/footer引入頁面

 

好比：

替換後每次修改，每一個引入的頁面都會修改

須要用到的模塊有：gulp、fs、gulp-replace這三個，一個task如圖：

共有三個模板頁面引入，須要增長能夠再添加pipe

首先利用fs模塊來讀取目標目錄下的文件，我這裏是srcPath.htmlroot，這是源文件的html的root，而後遍歷各個文件，把文件中的佔位符<!--header--><!--headerend-->和<!--footer--><!--footerend-->分別替換爲header.html和footer.html中的內容，最後在輸出到原目錄下就OK了。

爲何要用replace替換佔位符的方式，而不用concat直接把內容給追加到頁面呢？這是考慮到gulp任務可能執行屢次的狀況，重複追加內容沒法控制，因此用正則匹配替換內容的方式，不管任務執行多少次都不會重複追加內容。

事實上，爲了可以讓header、footer模板修改的時候，其餘頁面也能自動更新內容，咱們能夠再加一個watch任務：

將html加入監聽中，每次修改後，都會生成新的html，header、footer、sidebar修改後，對應的html也會被修改