gulp實現公共html代碼復用
阿新 • • 發佈：2017-12-21
char head post ron 便是 creat 兩個 package 測試文件
在開發網站的時候，尤其是類似於官網這樣的項目，頂部都會有一個導航欄，底部會有一些其他信息，而這兩個部分在每一個頁面都是有的。我們不可能在每個html頁面都寫一遍，這樣也不便後期維護等操作，所以可以把頂部導航和底部這兩塊的html代碼單獨寫在兩個html文件裏：header.html和footer.html，然後在每個html文件只需要在適當的位置引入公共部分的代碼即可。gulp有一個插件gulp-file-include即可實現該操作，gulp編譯完成之後，便可在每個html文件裏自動加上公共部分的代碼。現寫一個簡單的小demo如下：
1、新建一個項目demo，我這裏取名為：gulp
demo目錄如下
2、在gulp目錄下安裝gulp插件
1、執行：gulp init 命令，一直回車，然後生成一個package.json文件
2、安裝gulp：npm install gulp --save-dev
3、安裝gulp-file-include：npm install gulp-file-include --save-dev
3、在src/include目錄下新建三個html文件
這裏的文件便是公共的html部分，是要在每個html頁面被引入的。
3.1、meta.html:
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測試文件引入</title> <meta name="keywords" content="aa,bb,cc,dd,ee,ff"> <meta name="description" content="1234567890"> <link rel="icon" sizes="any" mask="" href="" /> <link rel="stylesheet" type="text/css" href="/dist/css/common.css" /> <meta name="format-detection " content="telephone=no">
3.2、header.html
<div> <button><a href="/index.html">首頁</a></button> <button><a href="/trade-news.html">行業新聞</a></button> <button><a href="/product/product.html">公司產品</a></button> <button><a href="/contact.html">聯系我們</a></button> </div>
3.3、footer.html
<div>這是footer部分</div>
4、在pages目錄下新建幾個html頁面，在每個頁面的適當位置引入include目錄下的html文件
註意：@@include後面填寫的是相對路徑
4.1、src/pages/index.html
<!DOCTYPE html> <html lang="en"> <head> @@include(‘../include/meta.html‘) </head> <body> @@include(‘../include/header.html‘) <div>首頁</div> @@include(‘../include/footer.html‘) </body> </html>
4.2、src/pages/product/product.html
<!DOCTYPE html> <html lang="en"> <head> @@include(‘../../include/meta.html‘) </head> <body> @@include(‘../../include/header.html‘) <div>公司產品頁</div> @@include(‘../../include/footer.html‘) </body> </html>
其他就省略
5、gulpfile.js文件
/** * Created by libo on 2017/12/21. */ var gulp = require(‘gulp‘); var fileinclude = require(‘gulp-file-include‘); gulp.task(‘fileinclude‘, function () { gulp.src(‘src/pages/**/*.html‘) .pipe(fileinclude({ prefix: ‘@@‘, basepath: ‘@file‘ })) .pipe(gulp.dest(‘dist‘)); });
6、執行gulp fileinclude 命令
然後在gulp項目下會生成一個dist目錄，相應編譯好的html文件都在該目錄下。
比如：dist目錄下index.html文件的代碼如圖：
7、頁面效果
gulp實現公共html代碼復用