安装gulp
cnpm install gulp -g
输入gulp -v看到版本号说明安装成功了
安装gulp-file-include：npm install gulp-file-include --save-dev
demo：
项目文件夹目录
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>
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>
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">
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>
footer.html
<div>这是footer部分</div>
gulpfile.js
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'));
});
然后进入文件夹在cmd中输入gulp fileinclude
然后你会发现文件夹下有一个dist文件
放到服务器上即可访问了
