在html中有時會引入一些css 或者js 檔案，這些檔案當我們打包完成之後就會出現檔案路徑不對應的情況。
針對這個問題可以使用乙個 useref 的外掛程式，使用這個外掛程式可以自動地處理html中的構建注釋。
按照這些構建注釋，useref 可以幫我們將檔案打包到指定的目錄中，並且在這個過程中還可以對檔案進行壓縮等操作。
yarn add gulp-useref --devconst
useref=(
)=>).
pipe
(plugins.
useref()
).pipe
(dest
('dist'))
}
useref會把對應的引入檔案合併打包並且自動的引入到html中，但也只是對這些檔案進行了簡單的合併和引入操作，我們可以在這個過程中對檔案進行一些其他的優化操作，例如壓縮。
yarn add gulp-htmlmin gulp-uglify gulp-clean-css gulp-if --devconst
useref=(
)=>).
pipe
(plugins.
useref()
)// 檔案流流到這一步的時候，會多種不同格式的檔案，html js css
// 所以這裡需要對這三種檔案分類進行不同的操作，所以這裡除了安裝對應檔案的壓縮外掛程式之外還額外安裝了乙個gulp-
if外掛程式用於判斷檔案的型別。
.pipe
(plugins.if(
/\.js$/
, plugins.
uglify()
)).pipe
(plugins.if(
/\.css$/
, plugins.
cleancss()
)).pipe
(plugins.if(
/\.html$/
, plugins.
htmlmin()
)).pipe
(dest
('dist'))
}
但是，當按照上面的執行之後，還會發現有些檔案並沒有生成或者是，檔案的內容是空的，這個是因為這個useref這個任務的讀寫流目標都是同乙個目錄，所以會出現一邊往裡面寫檔案同時還從裡面讀檔案的情況，也就是會有檔案讀寫衝突的問題。
解決這個問題最簡單的就是直接生成乙個新的目錄
const
useref=(
)=>).
pipe
(plugins.
useref()
)// 檔案流流到這一步的時候，會多種不同格式的檔案，html js css
// 所以這裡需要對這三種檔案分類進行不同的操作，所以這裡除了安裝對應檔案的壓縮外掛程式之外還額外安裝了乙個gulp-
if外掛程式用於判斷檔案的型別。
.pipe
(plugins.if(
/\.js$/
, plugins.
uglify()
)).pipe
(plugins.if(
/\.css$/
, plugins.
cleancss()
)).pipe
(plugins.if(
/\.html$/
, plugins.
htmlmin()
)).pipe
(dest
('release'))
}
.
pipe
(plugins.if(
/\.html$/
, plugins.
htmlmin()
))
上面由於同時讀寫 dist 這個目錄造成的讀寫衝突，我們使用了乙個另外的目錄作為目標目錄，然而這個新的目錄中又沒有我沒專案中的和字型檔案，所以之前的專案結構在使用useref之後就被破壞了，所以現在需要去規整一下專案的結構。
其實按照之前的構建流程，將src目錄中的檔案編譯之後都放到了 dist 中，但是後續還是用 useref 進行檔案的引入構建最終放到了 release 中，所以說像script，style，html直接放到 dist 中時不合理的，而是應該將這些個檔案先放到乙個臨時目錄中，然後使用 useref 將這個臨時目錄中的html進行相關的構建操作之後再放到 dist 中。
Gulp 自動化構建
use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
gulp構建自動化工具
首先確保gulp是全域性變數 npm install g gulp安裝完之後 gulp v 檢視版本 gulp v首先安裝 gulp yarn add gulpes6 es5 yarn add gulp babel 7.0.1 babel core babel preset es2015本地服務 y...