將html分為頭尾後打包整合，Gulp實現頭尾等公共頁面的複用
阿新 • • 發佈：2019-02-12
安裝gulp的前提是你已經有了nodejs的執行環境
1，新建專案：
mkdir gulp-file && cd gulp-file2，初始化一下npm init
3，全域性安裝gulp：npm install -g gulp
4，在每個要使用gulp的專案中都單獨安裝一次：
npm install gulp --save-dev5，資料夾介紹
|-node_modules |-page // 生產環境的 html 存放資料夾 |-include // 公共部分的 html 存放資料夾 //header.html;footer.html |-*.html //layout.html|-dist // 編輯後的 html 檔案 //生成layout.html gulpfile.js
6，
在新建的gulpfile.js，配置好gulp-file-include：
var gulp = require('gulp'); var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { // 適配page中所有資料夾下的所有html，排除page下的include資料夾中html gulp.src(['page/**/*.html','!page/include/**.html']) .pipe(fileinclude({ prefix:'@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });
接著新建兩個html檔案，分別是頭部和底部：
header.html
<h1>這是 header 的內容</h1>
footer.html
<h1>這是 footer 的內容</h1>
最後在新建一個html，把要用到的header和footer給include進來。
layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> @@include('include/header.html') <p> 這是 layout 的內容 </p> @@include('include/footer.html') </body> </html>
最後回到命令列工具裡，執行gulp fileinclude：