使用gulp-file-include對前端公共部分進行封裝
阿新 • • 發佈：2020-12-16
當我們在畫頁面的時候，總有部分是和其他頁面一模一樣的，比如頁頭、頁尾等，這樣就導致一個地方的修改要在其他N個頁面手動重複修改，這樣很耗費耐心，又容易犯錯，這時候gulp-file-include就顯得很有作用
1.安裝gulp-file-include
npm install --save-dev gulp-file-includ
2.建立gulpfile.js檔案
const fileinclude = require('gulp-file-include') function fileIncludeTask(done) { src(['./src/en/*.html']) //引入的路徑 .pipe(fileinclude({ prefix: '@@', //變數字首 @@include basepath: '@file' })) .pipe(dest('./dist/en/')); //輸出檔案路徑 沒有這個資料夾也沒關係，系統會自動建立一個 done() } exports.fileIncludeTask = fileIncludeTask
3.html部分程式碼
<body> //include 引用檔案的路徑一定要正確
@@include('../assets/public/zh/header.html',{
"index": "active"
})
</body>
4.被引用部分程式碼
<ul> <li @@if (context.index==='active' ) { class="active" }> <a href="#">首頁</a> </li> <li @@if (context.about==='active' ) { class="active" }> <a href="#">關於我們</a> </li> <li @@if (context.services==='active' ) { class="active" }> <a href="#">服務範圍</a> </li> <li @@if (context.contact==='active' ) { class="active" }> <a href="#">聯絡我們</a> </li> </ul>
5.這些都準備完了以後，在控制檯記得要去編譯一下，就可以了
gulp (gulpfile.js 所用的方法名)
6.打包css的話和上面基本一樣
npm update
npm install gulp-sass --save-dev
最後一定要注意在html裡引用的檔案路徑一定要正確，否則會報特別特別長的錯誤